@prokodo/ui 0.1.4 → 0.1.6

package/dist/theme.css

@@ -0,0 +1,5064 @@
+@charset "UTF-8";
+/* 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.
+ */
+:root {
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+  --color-grey-50: #F5F5F5;
+  --color-grey-100: #BCBCBC;
+  --color-grey-200: #9C9C9C;
+  --color-grey-300: #7D7D7D;
+  --color-grey-400: #606060;
+  --color-grey-500: #4D4D4D;
+  --color-grey-600: #393939;
+  --color-grey-700: #2F2F2F;
+  --color-grey-800: #242424;
+  --color-grey-900: #121212;
+  --color-primary-50: #E5EBFF;
+  --color-primary-100: #C9D8FF;
+  --color-primary-200: #ACC5FF;
+  --color-primary-300: #8CB3FF;
+  --color-primary-400: #64A1FF;
+  --color-primary-500: #1E90FF;
+  --color-primary-600: #2676d0;
+  --color-primary-700: #275ea2;
+  --color-primary-800: #244677;
+  --color-primary-900: #1e304f;
+  --color-secondary-50: #E6FBFF;
+  --color-secondary-100: #CCF7FF;
+  --color-secondary-200: #AFF3FF;
+  --color-secondary-300: #8EEFFF;
+  --color-secondary-400: #64EBFF;
+  --color-secondary-500: #00E6FF;
+  --color-secondary-600: #1dbcd0;
+  --color-secondary-700: #2393a2;
+  --color-secondary-800: #236c77;
+  --color-secondary-900: #1e484e;
+  --color-success: #2e7d32;
+  --color-warning: #f7b529;
+  --color-error: #f0453a;
+  --elevation-1: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --elevation-1--inset: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --elevation-1--text: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.15);
+  --elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --elevation-3: 0px 6px 10px -3px rgba(0, 0, 0, 0.25);
+  --elevation-5: 0px -20px 30px -25px rgba(0, 0, 0, 0.15);
+  --inner-elevation-1: 0px 2px 4px 1px rgba(0, 0, 0, 0.25) inset;
+  --inner-elevation-2: 0px -20px 30px -25px rgba(0, 0, 0, 0.15) inset;
+  --inner-elevation-3: -4px 0px 6px 0px rgba(0, 0, 0, 0.15) inset;
+  --gradient-background-primary-secondary: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-primary-grey-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-background-grey-1: linear-gradient(180deg, var(--color-white) -9.57%, var(--color-grey-50) 102.02%);
+  --gradient-background-grey-2: linear-gradient(180deg, var(--color-grey-50) -9.57%, var(--color-white) 102.02%);
+  --gradient-background-radial-grey-1: radial-gradient(55.8% 55.8% at 50% 46.23%, #F0F0F0 0%, var(--color-white) 100%);
+  --gradient-background-inherit: linear-gradient(112deg, var(--color-grey-50) 0%, var(--color-grey-100) 100%);
+  --gradient-background-primary: linear-gradient(112deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-secondary: linear-gradient(112deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-background-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-200) 50%, var(--color-grey-300) 100%);
+  --gradient-background-success: linear-gradient(112deg, #20E381 0%, #20E381 50%, #10CCB8 100%);
+  --gradient-background-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-background-error: linear-gradient(112deg, #EB5550 0%, #DB4A46 50%, #FF4444 100%);
+  --gradient-border-1: linear-gradient(180deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-border-2: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-3: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-6: linear-gradient(90deg, var(--color-secondary-500) 4.63%, var(--color-primary-500) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-text-primary-secondary-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
+  --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-400) 100%);
+  --gradient-text-grey: linear-gradient(90deg, var(--color-grey-300) 0%, var(--color-grey-600) 100%);
+  --gradient-text-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-text-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-text-error: linear-gradient(#6c4d4c, #984b47, #c52a2a);
+}
+
+:root[data-theme=dark] {
+  --color-white: $black;
+  --color-black: #F5F5F5;
+  --color-grey-50: #121212;
+  --color-grey-100: #242424;
+  --color-grey-200: #2F2F2F;
+  --color-grey-300: #393939;
+  --color-grey-400: #4D4D4D;
+  --color-grey-500: #606060;
+  --color-grey-600: #7D7D7D;
+  --color-grey-700: #9C9C9C;
+  --color-grey-800: #BCBCBC;
+  --color-grey-900: #F5F5F5;
+  --color-primary-50: #1e304f;
+  --color-primary-100: #244677;
+  --color-primary-200: #275ea2;
+  --color-primary-300: #2676d0;
+  --color-primary-400: #64A1FF;
+  --color-primary-500: #1E90FF;
+  --color-primary-600: #8CB3FF;
+  --color-primary-700: #ACC5FF;
+  --color-primary-800: #C9D8FF;
+  --color-primary-900: #E5EBFF;
+  --color-secondary-50: #1e484e;
+  --color-secondary-100: #236c77;
+  --color-secondary-200: #2393a2;
+  --color-secondary-300: #1dbcd0;
+  --color-secondary-400: #64EBFF;
+  --color-secondary-500: #00E6FF;
+  --color-secondary-600: #8EEFFF;
+  --color-secondary-700: #AFF3FF;
+  --color-secondary-800: #CCF7FF;
+  --color-secondary-900: #E6FBFF;
+  --color-success: #2e7d32;
+  --color-warning: #f7b529;
+  --color-error: #f0453a;
+  --elevation-1: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
+  --elevation-1--inset: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --elevation-1--text: 0px 1px 2px rgba(255, 255, 255, 0.15), 0px 1px 3px rgba(255, 255, 255, 0.15);
+  --elevation-2: 0px 1px 2px 0px rgba(255, 255, 255, 0.3), 0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+  --elevation-3: 0px 6px 10px -3px rgba(255, 255, 255, 0.25);
+  --elevation-5: 0px -20px 30px -25px rgba(255, 255, 255, 0.15);
+  --inner-elevation-1: 0px 2px 4px 1px rgba(255, 255, 255, 0.25) inset;
+  --inner-elevation-2: 0px -20px 30px -25px rgba(255, 255, 255, 0.15) inset;
+  --inner-elevation-3: -4px 0px 6px 0px rgba(255, 255, 255, 0.15) inset;
+  --gradient-background-primary-secondary: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-primary-grey-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+  --gradient-background-grey-1: linear-gradient(180deg, var(--color-white) -9.57%, var(--color-grey-50) 102.02%);
+  --gradient-background-grey-2: linear-gradient(180deg, var(--color-grey-50) -9.57%, var(--color-white) 102.02%);
+  --gradient-background-radial-grey-1: radial-gradient(55.8% 55.8% at 50% 46.23%, var(--color-grey-100) 0%, #1e1e1e 100%);
+  --gradient-background-inherit: linear-gradient(112deg, var(--color-grey-50) 0%, var(--color-grey-100) 100%);
+  --gradient-background-primary: linear-gradient(112deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-secondary: linear-gradient(112deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-background-info: linear-gradient(var(--color-grey-100), var(--color-grey-200), var(--color-grey-300));
+  --gradient-background-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-background-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-background-error: linear-gradient(#EB5550, #DB4A46, #FF4444);
+  --gradient-border-1: linear-gradient(180deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-border-2: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-3: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-7: linear-gradient(180deg, var(--color-grey-400) 0%, var(--color-grey-600) 100%);
+  --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-700) 100%);
+  --gradient-text-grey: linear-gradient(90deg, var(--color-grey-700) 0%, var(--color-grey-900) 100%);
+  --gradient-text-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-text-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-text-error: linear-gradient(#6c4d4c, #984b47, #c52a2a);
+}
+
+/* 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;
+  }
+}
+.prokodo-Accordion {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Accordion__item {
+  border: 1px solid var(--color-grey-200);
+  border-radius: 0.75rem;
+  margin-bottom: 8px;
+  overflow: hidden;
+  transition: border 0.3s ease;
+  box-shadow: var(--elevation-3);
+}
+.prokodo-Accordion__item--is-expanded {
+  border-color: var(--color-primary-500);
+}
+.prokodo-Accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+}
+.prokodo-Accordion__header__toggle {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+  gap: 0.75rem;
+}
+.prokodo-Accordion__header__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.prokodo-Accordion__header__actions__wrapper {
+  display: flex;
+}
+.prokodo-Accordion__header__icons {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+}
+.prokodo-Accordion__header__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* reserve space for a “border” without layout jump */
+  border: 2px solid transparent;
+  border-radius: 12px;
+  /* 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 */
+  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__wrapper:hover, .prokodo-Accordion__header__wrapper:focus-visible {
+  /* 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__wrapper--is-expanded {
+  position: relative;
+  z-index: 2;
+  /* keep border visible and settled */
+  background-size: 100% 100%, 100% 100%;
+  background-position: 0 0, 100% 0;
+  border-radius: 12px 12px 0 0;
+  animation: none !important;
+  box-shadow: var(--elevation-1);
+}
+.prokodo-Accordion__title {
+  width: calc(100% - 20px);
+  margin: 0;
+  font-weight: 500 !important;
+  font-size: 1.125rem !important;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-style: normal !important;
+  line-height: 1.55 !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none !important;
+  text-align: left !important;
+  text-decoration: none !important;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+.prokodo-Accordion__title {
+  font-weight: 500;
+}
+.prokodo-Accordion__icon {
+  padding-left: 1rem;
+  transition: transform 0.3s ease;
+}
+.prokodo-Accordion__icon--is-hidden {
+  display: none !important;
+}
+.prokodo-Accordion__content {
+  padding: 16px;
+  background-color: var(--color-white);
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-Accordion__content[hidden] {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.prokodo-Accordion__content--is-expanded {
+  opacity: 1;
+  pointer-events: auto;
+}
+.prokodo-Accordion__actions {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  background-color: var(--color-grey-100);
+  border-top: 1px solid var(--color-grey-200);
+}
+
+.prokodo-Animated {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 300ms ease-out;
+  will-change: opacity, transform, visibility;
+}
+.prokodo-Animated--animate-bottom-top {
+  transform: translate(0, 20vh);
+}
+.prokodo-Animated--animate-top-bottom {
+  transform: translate(0, -20vh);
+}
+.prokodo-Animated--animate-left-right {
+  transform: translate(-20vh, 0);
+}
+.prokodo-Animated--animate-right-left {
+  transform: translate(20vh, 0);
+}
+.prokodo-Animated--is-visible {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+.prokodo-Animated--is-disabled {
+  transform: none;
+}
+.prokodo-Animated--has-fast-speed {
+  transition: opacity 500ms ease-out, transform 500ms ease-out, visibility 500ms ease-out;
+}
+.prokodo-Animated--has-slow-speed {
+  transition: opacity 1500ms ease-out, transform 500ms ease-out, visibility 1500ms ease-out;
+}
+
+.prokodo-Avatar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 200px;
+  overflow: hidden;
+  background-color: var(--color-grey-100);
+}
+.prokodo-Avatar--primary {
+  background-color: var(--color-primary-500);
+}
+.prokodo-Avatar--secondary {
+  background-color: var(--color-secondary-500);
+}
+.prokodo-Avatar--info {
+  background-color: var(--color-grey-300);
+}
+.prokodo-Avatar--success {
+  background-color: var(--color-success);
+}
+.prokodo-Avatar--warning {
+  background-color: var(--color-warning);
+}
+.prokodo-Avatar--error {
+  background-color: var(--color-error);
+}
+.prokodo-Avatar--white {
+  background-color: var(--color-white);
+}
+.prokodo-Avatar--has-size-xs {
+  width: 30px;
+  height: 30px;
+}
+.prokodo-Avatar--has-size-sm {
+  width: 40px;
+  height: 40px;
+}
+.prokodo-Avatar--has-size-md {
+  width: 60px;
+  height: 60px;
+}
+.prokodo-Avatar--has-size-lg {
+  width: 80px;
+  height: 80px;
+}
+.prokodo-Avatar--has-size-xl {
+  width: 100px;
+  height: 100px;
+}
+.prokodo-Avatar__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  border-radius: 100%;
+}
+.prokodo-Avatar__link {
+  box-shadow: var(--elevation-1);
+  border-radius: 200px;
+}
+
+.prokodo-Button {
+  display: inline-block;
+  border-radius: 1.5rem;
+  border-width: 0;
+  padding: 0.875rem 1.5rem;
+  background-color: var(--color-grey-50);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+  background: var(--gradient-background-inherit);
+  font-weight: 400 !important;
+  font-size: 1rem !important;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-style: normal !important;
+  line-height: 1.4 !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none !important;
+  text-align: left !important;
+  text-decoration: none !important;
+}
+html[data-theme=dark] .prokodo-Button {
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button:hover {
+  box-shadow: none;
+}
+.prokodo-Button:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+  border-radius: 1.5rem;
+}
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF !important;
+}
+.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-bg-primary {
+  background: var(--gradient-background-primary);
+}
+.prokodo-Button--has-bg-secondary {
+  background: var(--gradient-background-secondary);
+}
+.prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
+  background: var(--gradient-background-info);
+}
+.prokodo-Button--has-bg-success {
+  background: var(--gradient-background-success);
+}
+.prokodo-Button--has-bg-warning {
+  background: var(--gradient-background-warning);
+}
+.prokodo-Button--has-bg-error {
+  background: var(--gradient-background-error);
+}
+.prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
+  background: none;
+  background-color: var(--color-grey-50);
+  padding: 0.75rem 1rem;
+  transition: background-color 0.3s ease-in-out;
+}
+.prokodo-Button--has-text-inherit:hover, .prokodo-Button--has-text-primary:hover, .prokodo-Button--has-text-secondary:hover, .prokodo-Button--has-text-info:hover, .prokodo-Button--has-text-success:hover, .prokodo-Button--has-text-warning:hover, .prokodo-Button--has-text-error:hover {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-text-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-text-inherit:hover {
+  background-color: var(--color-grey-500);
+}
+.prokodo-Button--has-text-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-text-primary:hover {
+  background-color: var(--color-primary-500);
+}
+.prokodo-Button--has-text-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-text-secondary:hover {
+  background-color: var(--color-secondary-500);
+}
+.prokodo-Button--is-disabled, .prokodo-Button--has-text-info {
+  color: var(--color-grey-700);
+}
+.prokodo-Button--is-disabled:hover, .prokodo-Button--has-text-info:hover {
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--has-text-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-text-success:hover {
+  background-color: var(--color-success);
+}
+.prokodo-Button--has-text-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-text-warning:hover {
+  background-color: var(--color-warning);
+}
+.prokodo-Button--has-text-error {
+  color: var(--color-error);
+}
+.prokodo-Button--has-text-error:hover {
+  background-color: var(--color-error);
+}
+.prokodo-Button--has-variant-outlined {
+  position: relative;
+  background: none;
+  color: var(--color-black) !important;
+}
+.prokodo-Button--has-variant-outlined::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: 0;
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined {
+  background: none;
+}
+.prokodo-Button--has-icon {
+  align-items: center;
+}
+.prokodo-Button--icon-only {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10000px;
+  padding: 0.75rem;
+}
+html[data-theme=dark] .prokodo-Button--icon-only {
+  background: none;
+}
+.prokodo-Button--has-fullWidth {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.prokodo-Button--is-disabled {
+  cursor: default;
+}
+.prokodo-Button__title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.prokodo-Button__icon {
+  margin-right: 5px;
+}
+.prokodo-Button__icon--icon-only {
+  margin-right: 0;
+}
+.prokodo-Button__link {
+  display: table;
+  width: 100%;
+  color: inherit;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Button__link--icon-only {
+  display: contents;
+}
+.prokodo-Button__link:hover {
+  text-decoration: none;
+}
+.prokodo-Button__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2rem;
+  width: 100%;
+}
+.prokodo-Button__content--icon-only {
+  padding: 0.5rem;
+  border-radius: 2000rem;
+}
+
+/**
+* Fade in
+*/
+@keyframes Card_fadeInAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes Card_fadeInMask {
+  to {
+    opacity: 1;
+  }
+}
+.prokodo-Card {
+  position: relative;
+  color: var(--color-white);
+  background-color: var(--color-white);
+  border-radius: 2rem;
+  /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
+  /* Reveal animation (what used to be &--has-animation + fadeInAnimation) */
+}
+.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: transparent;
+}
+.prokodo-Card__skeleton {
+  position: absolute;
+  z-index: 3;
+  width: 100%;
+  height: 100% !important;
+  border-radius: 2rem;
+}
+.prokodo-Card__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+html[data-theme=dark] .prokodo-Card__background {
+  opacity: 0.7;
+}
+.prokodo-Card__link {
+  align-items: center;
+}
+.prokodo-Card__link:hover {
+  text-decoration: none;
+}
+.prokodo-Card__content {
+  position: relative;
+  z-index: 2;
+  padding: 1.5rem;
+  color: var(--color-grey-500);
+}
+.prokodo-Card__content--has-link {
+  cursor: pointer;
+}
+.prokodo-Card__content--has-link:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Card__gradiant {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  border-radius: 2rem;
+}
+.prokodo-Card__gradiant--primary {
+  background: var(--gradient-background-primary);
+}
+.prokodo-Card__gradiant--secondary {
+  background: var(--gradient-background-secondary);
+}
+.prokodo-Card__gradiant--info {
+  background: var(--gradient-background-info);
+}
+.prokodo-Card__gradiant--success {
+  background: var(--gradient-background-success);
+}
+.prokodo-Card__gradiant--warning {
+  background: var(--gradient-background-warning);
+}
+.prokodo-Card--has-highlight {
+  position: relative;
+  /* 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--has-gradiant {
+  position: relative;
+}
+.prokodo-Card--has-gradiant, .prokodo-Card--has-background {
+  color: var(--color-white);
+}
+.prokodo-Card--has-shadow {
+  box-shadow: var(--elevation-1);
+}
+.prokodo-Card--has-animation {
+  animation: Card_fadeInAnimation 0.5s;
+}
+.prokodo-Card--is-clickable {
+  cursor: pointer;
+}
+.prokodo-Card--is-clickable:hover {
+  box-shadow: none;
+}
+.prokodo-Card--is-clickable:focus {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+
+.prokodo-Carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.prokodo-Carousel--is-active {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Carousel__wrapper {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+.prokodo-Carousel__item {
+  flex: 1 0 auto;
+}
+.prokodo-Carousel__mobile__tutorial {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 1;
+  visibility: visible;
+  background-color: rgba(36, 36, 36, 0.7);
+  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
+  z-index: 10;
+}
+.prokodo-Carousel__mobile__tutorial__animation {
+  min-height: 100px;
+  width: 100%;
+}
+.prokodo-Carousel__mobile__tutorial--is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Carousel__mobile__tutorial {
+    position: absolute;
+    top: auto;
+    left: -99999px;
+    width: 0;
+    height: 0;
+    text-indent: -99999px;
+  }
+}
+.prokodo-Carousel__controls {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  opacity: 0;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Carousel__controls {
+    opacity: 1;
+  }
+}
+.prokodo-Carousel__button {
+  padding: 0.25rem;
+}
+.prokodo-Carousel__dots {
+  display: flex;
+  margin: 2rem auto 0 auto;
+  text-align: center;
+}
+.prokodo-Carousel__dots__dot {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin: 0 5px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.prokodo-Carousel__dots__dot::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: 0;
+  background: var(--gradient-border-4);
+}
+.prokodo-Carousel__dots__dot--is-active {
+  background-color: #FFFFFF;
+}
+@media screen and (max-width: 1280px) {
+  .prokodo-Carousel__dots__dot {
+    position: absolute;
+    top: auto;
+    left: -99999px;
+    width: 0;
+    height: 0;
+    text-indent: -99999px;
+  }
+}
+
+.prokodo-Chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 25px;
+  padding: 0.25rem 0.75rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  border-color: var(--color-grey-500);
+  color: var(--color-black);
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Chip {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Chip {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-Chip--is-clickable {
+  cursor: pointer;
+}
+.prokodo-Chip--has-icon {
+  padding-right: 0.5rem;
+}
+.prokodo-Chip--filled {
+  background-color: inherit;
+  color: inherit;
+}
+.prokodo-Chip--filled--primary {
+  background-color: var(--color-primary-500);
+  color: var(--color-white);
+}
+.prokodo-Chip--filled--secondary {
+  background-color: var(--color-secondary-500);
+  color: var(--color-white);
+}
+.prokodo-Chip--filled--info {
+  background-color: var(--color-grey-300);
+  color: var(--color-white);
+}
+.prokodo-Chip--filled--success {
+  background-color: var(--color-success);
+  color: var(--color-white);
+}
+.prokodo-Chip--filled--error {
+  background-color: var(--color-error);
+  color: var(--color-white);
+}
+.prokodo-Chip--filled--warning {
+  background-color: var(--color-warning);
+  color: var(--color-black);
+}
+.prokodo-Chip--filled--white {
+  background-color: var(--color-white);
+  color: var(--color-black);
+}
+.prokodo-Chip--outlined {
+  border: 1px solid;
+  background-color: transparent;
+  color: var(--color-black);
+}
+.prokodo-Chip--outlined--primary {
+  border-color: var(--color-primary-300);
+  color: var(--color-primary-500);
+}
+.prokodo-Chip--outlined--secondary {
+  border-color: var(--color-secondary-300);
+  color: var(--color-secondary-500);
+}
+.prokodo-Chip--outlined--info {
+  border-color: var(--color-grey-300);
+  color: var(--color-grey-500);
+}
+.prokodo-Chip--outlined--success {
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+.prokodo-Chip--outlined--error {
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+.prokodo-Chip--outlined--warning {
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+.prokodo-Chip--outlined--white {
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+.prokodo-Chip__delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 100px;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  margin-left: 8px;
+  transition: color 0.3s ease;
+  background-color: var(--color-grey-50);
+}
+.prokodo-Chip__delete--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Chip__delete--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Chip__delete--info {
+  color: var(--color-grey-500);
+}
+.prokodo-Chip__delete--success {
+  color: var(--color-success);
+}
+.prokodo-Chip__delete--error {
+  color: var(--color-error);
+}
+.prokodo-Chip__delete--white, .prokodo-Chip__delete--warning {
+  color: var(--color-black);
+}
+
+.prokodo-Dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  z-index: 1300;
+  background-color: var(--color-white);
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 0.75rem;
+  padding: 1.5rem 1rem;
+  max-width: 600px;
+  width: auto;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  left: -99999px;
+  /* Full width modifier */
+}
+.prokodo-Dialog {
+  position: fixed;
+}
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Dialog {
+    transition: none;
+  }
+}
+.prokodo-Dialog--is-visible {
+  opacity: 1;
+  left: 50%;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translate(-50%, -50%) scale(1);
+  transition-delay: 0s;
+}
+.prokodo-Dialog__container {
+  position: relative;
+  padding: 0.75rem;
+  max-width: 90rem;
+  margin: 0 auto;
+  /* @each $breakpoint in $screen-breakpoints {
+    $offset: nth($screen-offsets, $index);
+
+    @if ($index == 0) {
+      padding-right: $offset;
+      padding-left: $offset;
+    }
+    @else {
+      @include screenLargerThan($breakpoint) {
+        padding-right: $offset;
+        padding-left: $offset;
+      }
+    }
+
+    $index: $index + 1;
+  } */
+  /* Scroll behavior styles */
+}
+.prokodo-Dialog__container:focus-visible {
+  outline: 0;
+}
+.prokodo-Dialog__container--scroll-paper {
+  height: 100%;
+  max-height: calc(100vh - 3rem);
+  overflow-y: auto;
+}
+.prokodo-Dialog__container--scroll-body {
+  max-height: none;
+  overflow: visible;
+}
+.prokodo-Dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 1rem;
+}
+.prokodo-Dialog__header__button {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  color: var(--color-grey-900);
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Dialog__header__button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Dialog__header__button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Dialog__header__button__icon {
+  margin-right: 0.25rem;
+}
+.prokodo-Dialog__header__button:focus {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Dialog__close {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.prokodo-Dialog__close__label {
+  display: inline-block;
+  padding-right: 1rem;
+  color: var(--color-grey-500);
+  text-shadow: var(--elevation--text-1);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Dialog__close:focus {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Dialog__title--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Dialog__content {
+  padding: 0 !important;
+  scrollbar-width: none;
+}
+.prokodo-Dialog__content--scroll-body {
+  height: calc(100vh - 50px);
+  overflow-y: scroll;
+}
+.prokodo-Dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 1rem;
+  gap: 0.75rem;
+}
+.prokodo-Dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 1299;
+  left: -99999px;
+}
+.prokodo-Dialog__backdrop--is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  left: 0;
+}
+.prokodo-Dialog__backdrop--is-visible {
+  position: fixed;
+}
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Dialog__backdrop {
+    transition: none;
+  }
+}
+.prokodo-Dialog--fullScreen {
+  max-width: none;
+  width: 100%;
+  height: 100%;
+}
+
+.prokodo-Drawer {
+  /* Backdrop (unchanged, fades in) */
+  /* Container (slide + fade via transitions) */
+  /* Header */
+  /* Content */
+}
+.prokodo-Drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 1301;
+}
+.prokodo-Drawer__backdrop--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Drawer__backdrop {
+    transition: none !important;
+  }
+}
+.prokodo-Drawer__container {
+  position: fixed;
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-1);
+  z-index: 1302;
+  pointer-events: none;
+  width: 300px;
+  height: 100%;
+  overscroll-behavior: contain;
+  /* The important part: animate transform/opacity */
+  opacity: 0;
+  will-change: transform, opacity;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  /* Anchor: left */
+  /* Anchor: right */
+  /* Anchor: top */
+  /* Anchor: bottom */
+}
+.prokodo-Drawer__container--open {
+  pointer-events: auto;
+  opacity: 1;
+}
+.prokodo-Drawer__container--fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  top: 0 !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  right: 0 !important;
+}
+.prokodo-Drawer__container--anchor-left {
+  top: 0;
+  left: 0;
+  width: 80vw;
+  height: 100vh;
+  transform: translateX(-100%);
+}
+.prokodo-Drawer__container--anchor-left--open {
+  transform: translateX(0);
+}
+.prokodo-Drawer__container--anchor-right {
+  top: 0;
+  right: 0;
+  width: 80vw;
+  height: 100vh;
+  transform: translateX(100%);
+}
+.prokodo-Drawer__container--anchor-right--open {
+  transform: translateX(0);
+}
+.prokodo-Drawer__container--anchor-top {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 50vh;
+  transform: translateY(-100%);
+}
+.prokodo-Drawer__container--anchor-top--open {
+  transform: translateY(0);
+}
+.prokodo-Drawer__container--anchor-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 50vh;
+  transform: translateY(100%);
+}
+.prokodo-Drawer__container--anchor-bottom--open {
+  transform: translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Drawer__container {
+    transition: none !important;
+    transform: translateX(0) translateY(0) !important;
+    opacity: 1 !important;
+  }
+}
+.prokodo-Drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-grey-200);
+}
+.prokodo-Drawer__content {
+  padding: 1rem;
+  max-height: calc(100% - 7rem);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.prokodo-DynamicList {
+  border: none;
+  padding: 0;
+  /* ───────────────── helper / error text */
+}
+.prokodo-DynamicList__label {
+  margin-bottom: 0.75rem;
+}
+.prokodo-DynamicList__list {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0;
+}
+.prokodo-DynamicList__list__item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-DynamicList__list__item--is-multi {
+  align-items: flex-start;
+}
+.prokodo-DynamicList__field--is-multi {
+  margin-bottom: 1rem;
+}
+.prokodo-DynamicList__field--is-multi:last-of-type {
+  margin-bottom: 0;
+}
+.prokodo-DynamicList__delete__button--is-multi {
+  margin-top: 0.5rem;
+}
+.prokodo-DynamicList__helperText {
+  padding-left: 1.5rem;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  width: 80%;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DynamicList__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DynamicList__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-DynamicList__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-DynamicList__helperText__content {
+  width: 100%;
+}
+.prokodo-DynamicList__helperText__content--is-error {
+  color: var(--color-error);
+}
+
+.prokodo-Form__label {
+  padding-bottom: 1.5rem;
+}
+.prokodo-Form__label--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Form__grid {
+  padding: 0 !important;
+}
+.prokodo-Form__hp {
+  display: none !important;
+}
+.prokodo-Form__footer {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Form__footer__submit {
+  text-align: center !important;
+}
+
+.prokodo-FormField {
+  padding-bottom: 1rem;
+}
+
+.prokodo-FormResponse {
+  padding: 0 1rem;
+}
+.prokodo-FormResponse__success {
+  color: var(--color-success);
+  font-weight: 700;
+}
+.prokodo-FormResponse__errors {
+  display: block;
+  margin-bottom: 0.75rem;
+  color: var(--color-grey-300);
+}
+.prokodo-FormResponse__errors__item {
+  display: block;
+  padding-bottom: 1rem;
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-FormResponse__errors__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-FormResponse__errors__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-FormResponse__errors__desc {
+  display: block;
+  padding: 0;
+  color: var(--color-error);
+}
+
+.prokodo-Grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  padding: 1rem;
+}
+
+.prokodo-GridRow {
+  /* Grid alignment classes */
+  /* Define grid-column spans for different screen sizes */
+}
+.prokodo-GridRow--align-left {
+  justify-items: start;
+}
+.prokodo-GridRow--align-center {
+  justify-items: center;
+}
+.prokodo-GridRow--align-right {
+  justify-items: end;
+}
+.prokodo-GridRow--xs-1 {
+  grid-column: span 1;
+}
+.prokodo-GridRow--xs-2 {
+  grid-column: span 2;
+}
+.prokodo-GridRow--xs-3 {
+  grid-column: span 3;
+}
+.prokodo-GridRow--xs-4 {
+  grid-column: span 4;
+}
+.prokodo-GridRow--xs-5 {
+  grid-column: span 5;
+}
+.prokodo-GridRow--xs-6 {
+  grid-column: span 6;
+}
+.prokodo-GridRow--xs-7 {
+  grid-column: span 7;
+}
+.prokodo-GridRow--xs-8 {
+  grid-column: span 8;
+}
+.prokodo-GridRow--xs-9 {
+  grid-column: span 9;
+}
+.prokodo-GridRow--xs-10 {
+  grid-column: span 10;
+}
+.prokodo-GridRow--xs-11 {
+  grid-column: span 11;
+}
+.prokodo-GridRow--xs-12 {
+  grid-column: span 12;
+}
+@media screen and (min-width: 375px) {
+  .prokodo-GridRow--sm-1 {
+    grid-column: span 1;
+  }
+  .prokodo-GridRow--sm-2 {
+    grid-column: span 2;
+  }
+  .prokodo-GridRow--sm-3 {
+    grid-column: span 3;
+  }
+  .prokodo-GridRow--sm-4 {
+    grid-column: span 4;
+  }
+  .prokodo-GridRow--sm-5 {
+    grid-column: span 5;
+  }
+  .prokodo-GridRow--sm-6 {
+    grid-column: span 6;
+  }
+  .prokodo-GridRow--sm-7 {
+    grid-column: span 7;
+  }
+  .prokodo-GridRow--sm-8 {
+    grid-column: span 8;
+  }
+  .prokodo-GridRow--sm-9 {
+    grid-column: span 9;
+  }
+  .prokodo-GridRow--sm-10 {
+    grid-column: span 10;
+  }
+  .prokodo-GridRow--sm-11 {
+    grid-column: span 11;
+  }
+  .prokodo-GridRow--sm-12 {
+    grid-column: span 12;
+  }
+}
+@media screen and (min-width: 480px) {
+  .prokodo-GridRow--md-1 {
+    grid-column: span 1;
+  }
+  .prokodo-GridRow--md-2 {
+    grid-column: span 2;
+  }
+  .prokodo-GridRow--md-3 {
+    grid-column: span 3;
+  }
+  .prokodo-GridRow--md-4 {
+    grid-column: span 4;
+  }
+  .prokodo-GridRow--md-5 {
+    grid-column: span 5;
+  }
+  .prokodo-GridRow--md-6 {
+    grid-column: span 6;
+  }
+  .prokodo-GridRow--md-7 {
+    grid-column: span 7;
+  }
+  .prokodo-GridRow--md-8 {
+    grid-column: span 8;
+  }
+  .prokodo-GridRow--md-9 {
+    grid-column: span 9;
+  }
+  .prokodo-GridRow--md-10 {
+    grid-column: span 10;
+  }
+  .prokodo-GridRow--md-11 {
+    grid-column: span 11;
+  }
+  .prokodo-GridRow--md-12 {
+    grid-column: span 12;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-GridRow--lg-1 {
+    grid-column: span 1;
+  }
+  .prokodo-GridRow--lg-2 {
+    grid-column: span 2;
+  }
+  .prokodo-GridRow--lg-3 {
+    grid-column: span 3;
+  }
+  .prokodo-GridRow--lg-4 {
+    grid-column: span 4;
+  }
+  .prokodo-GridRow--lg-5 {
+    grid-column: span 5;
+  }
+  .prokodo-GridRow--lg-6 {
+    grid-column: span 6;
+  }
+  .prokodo-GridRow--lg-7 {
+    grid-column: span 7;
+  }
+  .prokodo-GridRow--lg-8 {
+    grid-column: span 8;
+  }
+  .prokodo-GridRow--lg-9 {
+    grid-column: span 9;
+  }
+  .prokodo-GridRow--lg-10 {
+    grid-column: span 10;
+  }
+  .prokodo-GridRow--lg-11 {
+    grid-column: span 11;
+  }
+  .prokodo-GridRow--lg-12 {
+    grid-column: span 12;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .prokodo-GridRow--xl-1 {
+    grid-column: span 1;
+  }
+  .prokodo-GridRow--xl-2 {
+    grid-column: span 2;
+  }
+  .prokodo-GridRow--xl-3 {
+    grid-column: span 3;
+  }
+  .prokodo-GridRow--xl-4 {
+    grid-column: span 4;
+  }
+  .prokodo-GridRow--xl-5 {
+    grid-column: span 5;
+  }
+  .prokodo-GridRow--xl-6 {
+    grid-column: span 6;
+  }
+  .prokodo-GridRow--xl-7 {
+    grid-column: span 7;
+  }
+  .prokodo-GridRow--xl-8 {
+    grid-column: span 8;
+  }
+  .prokodo-GridRow--xl-9 {
+    grid-column: span 9;
+  }
+  .prokodo-GridRow--xl-10 {
+    grid-column: span 10;
+  }
+  .prokodo-GridRow--xl-11 {
+    grid-column: span 11;
+  }
+  .prokodo-GridRow--xl-12 {
+    grid-column: span 12;
+  }
+}
+
+.prokodo-Headline {
+  margin: 0;
+  /* Basale Farb-Varianten (ohne Gradients) */
+  /* Highlight-Grundlage */
+  /* Varianten mit Highlight (mit Gradients/Shadow) */
+  /* Größen */
+  /* Alignment */
+}
+.prokodo-Headline--inherit {
+  color: var(--color-grey-700);
+}
+.prokodo-Headline--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Headline--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Headline--success {
+  color: var(--color-success);
+}
+.prokodo-Headline--info {
+  color: var(--color-grey-300);
+}
+.prokodo-Headline--warning {
+  color: var(--color-warning);
+}
+.prokodo-Headline--error {
+  color: var(--color-error);
+}
+.prokodo-Headline--white {
+  color: #fff;
+}
+.prokodo-Headline--black {
+  color: var(--color-black);
+}
+.prokodo-Headline--is-highlighted {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.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));
+}
+.prokodo-Headline--xs {
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Headline--sm {
+  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-Headline--md {
+  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.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Headline--md {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Headline--md {
+    font-size: 1.5rem;
+  }
+}
+.prokodo-Headline--lg {
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -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-Headline--lg {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Headline--lg {
+    font-size: 1.75rem;
+  }
+}
+.prokodo-Headline--xl {
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Headline--xl {
+    font-size: 1.75rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Headline--xl {
+    font-size: 2.25rem;
+  }
+}
+.prokodo-Headline--xxl {
+  font-weight: 900;
+  font-size: 1.75rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.6;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Headline--xxl {
+    font-size: 2.25rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Headline--xxl {
+    font-size: 2.75rem;
+  }
+}
+.prokodo-Headline--center {
+  text-align: center;
+  justify-content: center;
+}
+.prokodo-Headline--right {
+  text-align: right;
+  justify-content: flex-end;
+}
+
+.prokodo-Icon {
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  --webkit-mask-size: contain;
+  --webkit-mask-repeat: no-repeat;
+  --webkit-mask-position: center;
+}
+.prokodo-Icon--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Icon--primary:hover {
+  color: var(--color-primary-500);
+}
+.prokodo-Icon--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Icon--secondary:hover {
+  color: var(--color-secondary-500);
+}
+.prokodo-Icon--info {
+  color: var(--color-grey-300);
+}
+.prokodo-Icon--info:hover {
+  color: var(--color-grey-300);
+}
+.prokodo-Icon--success {
+  color: var(--color-success);
+}
+.prokodo-Icon--success:hover {
+  color: var(--color-success);
+}
+.prokodo-Icon--warning {
+  color: var(--color-warning);
+}
+.prokodo-Icon--warning:hover {
+  color: var(--color-warning);
+}
+.prokodo-Icon--error {
+  color: var(--color-error);
+}
+.prokodo-Icon--error:hover {
+  color: var(--color-error);
+}
+.prokodo-Icon--white {
+  color: #FFFFFF;
+}
+.prokodo-Icon--white:hover {
+  color: #FFFFFF;
+}
+
+.prokodo-Image {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding-bottom: 1rem;
+}
+.prokodo-Image__caption {
+  position: absolute;
+  width: 100%;
+  bottom: -1rem;
+  left: 0;
+  opacity: 0.5;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Image__caption {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Image__caption {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Image__caption {
+  text-align: center;
+}
+
+.prokodo-ImageText__grid {
+  position: relative;
+  flex-direction: column-reverse !important;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__grid {
+    flex-direction: row !important;
+  }
+}
+.prokodo-ImageText__grid--is-reverse {
+  flex-direction: column-reverse !important;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__grid--is-reverse {
+    flex-direction: row-reverse !important;
+  }
+}
+.prokodo-ImageText__sub__headline {
+  text-transform: uppercase;
+}
+.prokodo-ImageText__content {
+  display: flex;
+  align-items: center;
+  align-self: end;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-ImageText__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .prokodo-ImageText__content {
+    align-self: center;
+  }
+}
+.prokodo-ImageText__content__paragraph {
+  color: var(--color-grey-300);
+}
+.prokodo-ImageText__animated__container {
+  width: 100%;
+}
+.prokodo-ImageText__animation {
+  width: 100%;
+  height: 100%;
+}
+.prokodo-ImageText__image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: end;
+}
+.prokodo-ImageText__image__src {
+  width: 100%;
+}
+
+.prokodo-Input {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+  width: 100%;
+}
+.prokodo-Input__label {
+  transform-origin: top left;
+  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
+  padding-bottom: 0.5rem;
+  color: var(--color-grey-600);
+  z-index: 1;
+  pointer-events: none;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Input__label {
+    position: absolute;
+    left: 1.5rem;
+    font-size: 1.125rem;
+    top: 1.75rem;
+    /* start centered vertically, at full size */
+    transform: translateY(-50%) scale(1);
+    padding: 0;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Input__label--is-focused {
+    /* lift up and shrink */
+    transform: translateY(-150%) scale(0.75);
+    color: var(--color-primary-500);
+    /* white background behind text so it “floats” */
+    background-color: var(--color-white);
+    padding: 0 0.25rem;
+  }
+}
+.prokodo-Input__inner {
+  position: relative;
+}
+.prokodo-Input__field {
+  position: relative;
+  box-shadow: var(--elevation-1);
+  border-radius: 1.5rem;
+}
+.prokodo-Input__input {
+  width: calc(100% - 0.25rem + 4px);
+  padding: 0;
+  text-align: left;
+  -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: source-over;
+          mask-composite: add;
+  border: none;
+  color: var(--color-grey-900);
+  border-radius: 1.5rem;
+  background: var(--gradient-border-7);
+  /* Standard :autofill selector (supported in modern browsers) */
+  /* Chrome / Edge / Opera / Safari (WebKit/Blink) */
+  /* Firefox (legacy) */
+  /* Optional: border style when autofilled */
+  /* Optional: gleiche Styles für Textareas, falls autocomplete genutzt wird */
+}
+.prokodo-Input__input input:-webkit-autofill, .prokodo-Input__input textarea:-webkit-autofill {
+  background-color: var(--color-white);
+  color: var(--color-grey-900);
+}
+.prokodo-Input__input input:autofill,
+.prokodo-Input__input textarea:autofill {
+  background-color: var(--color-white);
+  color: var(--color-grey-900);
+}
+.prokodo-Input__input input:-webkit-autofill,
+.prokodo-Input__input input:-webkit-autofill:hover,
+.prokodo-Input__input input:-webkit-autofill:focus,
+.prokodo-Input__input textarea:-webkit-autofill,
+.prokodo-Input__input textarea:-webkit-autofill:hover,
+.prokodo-Input__input textarea:-webkit-autofill:focus {
+  /* Paint over the browser’s autofill background */
+  box-shadow: 0 0 0 1000px var(--color-white) inset;
+  /* Text color inside autofilled field */
+  -webkit-text-fill-color: var(--color-grey-900);
+  /* Long transition hack so the yellow flash is not visible */
+  -webkit-transition: background-color 9999s ease-out, color 9999s ease-out;
+  transition: background-color 9999s ease-out, color 9999s ease-out;
+}
+.prokodo-Input__input input:-moz-autofill,
+.prokodo-Input__input textarea:-moz-autofill {
+  box-shadow: 0 0 0 1000px var(--color-white) inset;
+  background-color: var(--color-white);
+  color: var(--color-grey-900);
+}
+.prokodo-Input__input input:is(:-webkit-autofill, :-webkit-autofill), .prokodo-Input__input textarea:is(:-webkit-autofill, :-webkit-autofill) {
+  border-color: none; /* adjust as needed */
+}
+.prokodo-Input__input input:is(:autofill, :-webkit-autofill),
+.prokodo-Input__input textarea:is(:autofill, :-webkit-autofill) {
+  border-color: none; /* adjust as needed */
+}
+.prokodo-Input__input textarea:-webkit-autofill,
+.prokodo-Input__input textarea:-moz-autofill {
+  box-shadow: 0 0 0 1000px #ffffff inset;
+  -webkit-text-fill-color: #000000;
+  color: #000000 !important;
+}
+.prokodo-Input__input--is-focused {
+  background: var(--gradient-border-4);
+}
+.prokodo-Input__input:hover {
+  background: var(--gradient-border-4);
+}
+.prokodo-Input__input--multiline {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.prokodo-Input__input--focused {
+  background: var(--gradient-border-4);
+}
+.prokodo-Input__input--disabled {
+  background: var(--gradient-border-8);
+}
+.prokodo-Input__input--disabled:hover {
+  background: var(--gradient-border-8);
+}
+.prokodo-Input__input__node {
+  width: calc(100% - 1.5rem - 1.5rem - 0.25rem);
+  padding: 0.875rem 1.5rem;
+  margin: 2px;
+  border: none;
+  outline: none;
+  border-radius: 1.5rem;
+  color: var(--color-grey-900);
+  background-color: var(--color-white);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Input__input__node {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Input__input__node {
+    font-size: 1rem;
+  }
+}
+.prokodo-Input__input__node {
+  font-size: 1rem;
+}
+.prokodo-Input__input__node--multiline {
+  /* allow it to grow to fill the wrapper */
+  flex: 1 1;
+  /* remove inline-table & min-height */
+  display: block;
+  height: 100%;
+  resize: vertical;
+  overflow: auto;
+  position: relative;
+}
+.prokodo-Input__input__node--multiline::-webkit-resizer {
+  display: none;
+}
+.prokodo-Input__input__node--multiline::after {
+  content: "";
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  width: 16px;
+  height: 16px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23000" d="M2 14h12v1H2zM0 12h16v1H0zM4 10h8v1H4z"/></svg>') no-repeat center center;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.prokodo-Input__input__node:disabled {
+  color: var(--color-grey-300);
+  background: var(--color-white);
+}
+.prokodo-Input__input:focus {
+  border-color: var(--color-primary-500);
+  box-shadow: 0 0 5px var(--color-primary-500);
+}
+.prokodo-Input__input[aria-invalid=true] {
+  border-color: var(--color-error);
+}
+.prokodo-Input__footer {
+  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;
+}
+.prokodo-Input__helperText {
+  padding-left: 1.5rem;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  width: 80%;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Input__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Input__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Input__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-Input__helperText__content {
+  width: 100%;
+}
+.prokodo-Input__helperText__content--is-error {
+  color: var(--color-error);
+}
+.prokodo-Input__helperText__legend {
+  width: 25%;
+  text-align: right;
+}
+.prokodo-Input__counter {
+  padding-top: 0.75rem;
+  color: var(--color-grey-600);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Input__counter {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Input__counter {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-InputOTP {
+  display: flex;
+  justify-content: space-between;
+}
+.prokodo-InputOTP__label, .prokodo-InputOTP__instruction {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-InputOTP__field {
+  width: 42px;
+  height: 42px;
+}
+.prokodo-InputOTP__input {
+  width: 42px;
+  height: 42px;
+}
+.prokodo-InputOTP__input__container {
+  width: 100%;
+  height: 100%;
+  border-radius: 80px;
+}
+.prokodo-InputOTP__input__node {
+  width: 100%;
+  padding: 0.5rem 1rem;
+}
+
+.prokodo-Label {
+  font-weight: 400;
+  display: block;
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Label {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Label {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-Label {
+  font-size: 1rem;
+}
+.prokodo-Label {
+  filter: drop-shadow(var(--elevation-1--text));
+}
+.prokodo-Label__highlighted {
+  font-style: normal;
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Label__highlighted--error {
+  background-image: var(--gradient-text-error);
+}
+.prokodo-Label__text {
+  color: var(--color-grey-500);
+  font-style: normal;
+}
+html[data-theme=dark] .prokodo-Label__text {
+  color: var(--color-grey-700);
+}
+
+.prokodo-Link {
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--color-grey-500);
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Link {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Link {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-Link:hover {
+  text-decoration: underline;
+}
+.prokodo-Link--has-no-background:hover {
+  text-decoration: underline;
+  color: var(--color-primary-500);
+}
+.prokodo-Link--has-no-background:focus {
+  color: var(--color-primary-500);
+}
+.prokodo-Link--has-no-background--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Link--has-no-background--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Link--has-no-background--info {
+  color: var(--color-grey-300);
+}
+.prokodo-Link--has-no-background--success {
+  color: var(--color-success);
+}
+.prokodo-Link--has-no-background--warning {
+  color: var(--color-warning);
+}
+.prokodo-Link--has-no-background--error {
+  color: var(--color-error);
+}
+.prokodo-Link--has-no-background--white {
+  color: var(--color-white);
+}
+.prokodo-Link--has-no-background--white:hover {
+  color: var(--color-white);
+}
+.prokodo-Link--has-no-background--primary:hover, .prokodo-Link--has-no-background--secondary:hover, .prokodo-Link--has-no-background--success:hover, .prokodo-Link--has-no-background--error:hover, .prokodo-Link--has-no-background--info:hover, .prokodo-Link--has-no-background--warning:hover {
+  color: var(--color-grey-500);
+}
+.prokodo-Link--has-no-background--primary:focus, .prokodo-Link--has-no-background--secondary:focus, .prokodo-Link--has-no-background--success:focus, .prokodo-Link--has-no-background--error:focus, .prokodo-Link--has-no-background--info:focus, .prokodo-Link--has-no-background--warning:focus {
+  color: var(--color-grey-500);
+}
+
+.prokodo-List {
+  padding: 0;
+}
+.prokodo-List__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  margin: 0.25rem 0;
+  color: var(--color-grey-500);
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-List__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-List__item {
+  font-weight: 500;
+}
+.prokodo-List__item--has-icon {
+  flex-wrap: nowrap;
+}
+.prokodo-List__item__card {
+  margin: 0.75rem 0;
+}
+.prokodo-List__item__card__content {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+}
+.prokodo-List__item__inner {
+  width: 100%;
+  display: flex;
+}
+.prokodo-List__item__link {
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-List__item__link {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item__link {
+    font-size: 1rem;
+  }
+}
+.prokodo-List__item__link__header {
+  display: flex;
+  align-items: center;
+}
+.prokodo-List__item__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  margin-top: 0.25rem;
+  margin-right: 0.25rem;
+  border-radius: 1000rem;
+  background-color: var(--color-grey-50);
+}
+html[data-theme=dark] .prokodo-List__item__icon {
+  background-color: var(--color-grey-400);
+}
+.prokodo-List__item__icon__wrapper {
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+}
+.prokodo-List__item__title--card {
+  display: block;
+  padding: 0.75rem 0 0.25rem 0.5rem;
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-List__item__title--card {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item__title--card {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-List__item__title--card {
+  font-weight: 500;
+}
+.prokodo-List__item__content {
+  width: calc(100% - 2rem);
+}
+.prokodo-List__item__desc {
+  color: var(--color-grey-600);
+  margin: 0;
+  padding: 0.25rem 0;
+  display: block;
+  width: 100%;
+  -webkit-box-orient: vertical;
+  line-clamp: 3;
+  -webkit-line-clamp: 3; /* Limits the content to 3 lines */
+  overflow: hidden;
+  text-overflow: ellipsis; /* Adds the ellipsis at the end */
+  word-wrap: break-word;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-List__item__desc {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item__desc {
+    font-size: 1rem;
+  }
+}
+.prokodo-List__item__desc--card {
+  padding-top: 0;
+  padding-left: 0.5rem;
+}
+.prokodo-List__item--is-clickable {
+  cursor: pointer;
+  color: var(--color-grey-500);
+}
+.prokodo-List__item--is-clickable a {
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-List__item--is-clickable a {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item--is-clickable a {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-List__item--is-clickable a {
+  font-weight: 500;
+}
+.prokodo-List__item--is-clickable:hover span[role=presentation] {
+  color: var(--color-primary-500);
+}
+.prokodo-List__item--is-clickable:hover .list-title {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--inherit:hover {
+  color: var(--color-primary-500);
+}
+.prokodo-List__item--is-clickable--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-List__item--is-clickable--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-List__item--is-clickable--info {
+  color: var(--color-grey-300);
+}
+.prokodo-List__item--is-clickable--success {
+  color: var(--color-success);
+}
+.prokodo-List__item--is-clickable--warning {
+  color: var(--color-warning);
+}
+.prokodo-List__item--is-clickable--error {
+  color: var(--color-error);
+}
+.prokodo-List__item--is-clickable--white {
+  color: var(--color-white);
+}
+.prokodo-List__item--is-clickable--white:hover {
+  color: var(--color-white);
+}
+.prokodo-List__item--is-clickable--primary:hover, .prokodo-List__item--is-clickable--secondary:hover, .prokodo-List__item--is-clickable--success:hover, .prokodo-List__item--is-clickable--error:hover, .prokodo-List__item--is-clickable--info:hover, .prokodo-List__item--is-clickable--warning:hover {
+  color: var(--color-grey-500);
+}
+.prokodo-List__item--card {
+  display: block;
+  text-decoration: none;
+}
+
+.prokodo-Lottie__container {
+  position: relative;
+}
+
+.prokodo-PostItem__grid {
+  /* Mobile: stacked, image on top via order */
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+  align-items: stretch;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__grid {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1.5rem;
+  }
+}
+.prokodo-PostItem__media {
+  order: 1;
+  width: 100%;
+  min-width: 0;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__media {
+    order: 0;
+    flex: 0 1 33.3333%;
+    max-width: 33.333%;
+    min-width: 0; /* prevent overflow pushing layout */
+  }
+}
+.prokodo-PostItem__main {
+  order: 0;
+  width: 100%;
+  min-width: 0;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__main {
+    order: 1;
+    flex: 0 1 66.666%;
+    max-width: 66.666%;
+    min-width: 0;
+  }
+}
+.prokodo-PostItem__animation {
+  transform: none;
+}
+.prokodo-PostItem__headline {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-PostItem__info {
+  display: flex;
+  align-items: center;
+}
+.prokodo-PostItem__date {
+  color: var(--color-grey-300);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostItem__date {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__date {
+    font-size: 1rem;
+  }
+}
+.prokodo-PostItem__read__count {
+  padding-left: 0.75rem;
+  color: var(--color-grey-300);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostItem__read__count {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__read__count {
+    font-size: 1rem;
+  }
+}
+.prokodo-PostItem__content {
+  display: flex;
+  align-items: center;
+  min-width: 0; /* ← prevent long lines from forcing column wider */
+  overflow-wrap: anywhere; /* ← allow breaking long words/URLs */
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostItem__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-PostItem__content__paragraph {
+  color: var(--color-grey-500);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-PostItem__content__paragraph > p {
+  margin: 0.5rem 0.25rem;
+}
+.prokodo-PostItem__image {
+  min-height: 300px;
+  min-height: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.prokodo-PostItem__image__content__wrapper {
+  padding: 0;
+}
+.prokodo-PostItem__image__wrapper {
+  width: 100%;
+  min-width: 300px;
+  min-height: 300px;
+  border-radius: 25px;
+  overflow: hidden;
+  transform: none; /* prevent overlay */
+}
+.prokodo-PostItem__button {
+  width: 100%;
+  margin-top: 1rem;
+}
+.prokodo-PostItem__button__content {
+  justify-content: flex-start;
+}
+@media screen and (min-width: 375px) {
+  .prokodo-PostItem__button {
+    width: auto;
+  }
+}
+
+.prokodo-PostItemAuthor {
+  display: flex;
+  align-items: center;
+  padding-right: 1.5rem;
+}
+.prokodo-PostItemAuthor__name {
+  padding-left: 0.75rem;
+  color: var(--color-grey-500);
+  font-weight: 500;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostItemAuthor__name {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItemAuthor__name {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-PostTeaser__card {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding: 0 !important;
+}
+.prokodo-PostTeaser__card__container {
+  height: 100%;
+  overflow: hidden;
+}
+.prokodo-PostTeaser__card__content {
+  padding: 0 1rem 0;
+}
+.prokodo-PostTeaser__card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding: 1rem;
+}
+.prokodo-PostTeaser__meta {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  width: calc(100% - 2rem);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 2;
+}
+.prokodo-PostTeaser__meta__category {
+  display: inline-block;
+  max-width: 50%;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-PostTeaser__meta__readcount {
+  margin: 0;
+}
+.prokodo-PostTeaser__meta__readcount__wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+.prokodo-PostTeaser__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.prokodo-PostTeaser__image__wrapper {
+  position: relative;
+  width: 100%;
+  height: 230px;
+  overflow: hidden;
+}
+.prokodo-PostTeaser__image__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.prokodo-PostTeaser__image__caption {
+  bottom: 0.5rem;
+  text-align: right;
+  padding-right: 0.5rem;
+  width: calc(100% - 0.5rem);
+}
+.prokodo-PostTeaser__date {
+  padding: 0;
+  color: var(--color-grey-300);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-PostTeaser__animation {
+  width: 100%;
+  height: 230px;
+}
+.prokodo-PostTeaser__headline {
+  padding: 1rem 1rem 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-PostTeaser__content {
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostTeaser__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostTeaser__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-PostTeaser__content {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-PostTeaser__link {
+  display: flex;
+  align-items: center;
+}
+.prokodo-PostTeaser__link__icon {
+  margin-right: 0.25rem;
+}
+.prokodo-PostTeaser__link--is-hovered {
+  color: var(--color-primary-500) !important;
+}
+
+.prokodo-PostWidget__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.prokodo-PostWidget__list--has-fullWidth {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.prokodo-PostWidget__list__item {
+  display: block;
+  margin-top: 1rem;
+}
+.prokodo-PostWidget__list__item--has-fullWidth {
+  width: 100%;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostWidget__list__item--has-fullWidth {
+    width: calc(50% - 0.5rem);
+  }
+}
+.prokodo-PostWidget__list__item__content {
+  display: flex;
+  justify-content: flex-start;
+}
+.prokodo-PostWidget__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  /* This is the Image component’s container to force fill */
+}
+.prokodo-PostWidget__image__link {
+  position: relative;
+  display: block;
+  width: 80px;
+  height: 80px;
+  margin-right: 1rem;
+  line-height: 0;
+  border-radius: 13px;
+  overflow: hidden;
+}
+.prokodo-PostWidget__image__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.prokodo-PostWidget__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+.prokodo-PostWidget__headline {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-PostWidget__date {
+  display: block;
+  margin: 0;
+  color: var(--color-grey-300);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostWidget__date {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostWidget__date {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-PostWidgetCarousel__card {
+  padding-bottom: 0;
+}
+.prokodo-PostWidgetCarousel__carousel {
+  position: relative;
+  margin-top: 1.5rem;
+}
+.prokodo-PostWidgetCarousel__carousel__wrapper {
+  padding-bottom: 1rem;
+}
+.prokodo-PostWidgetCarousel__carousel__item__image__link {
+  position: relative;
+  width: 100%;
+  height: clamp(180px, 30vw, 420px);
+  display: block;
+  line-height: 0;
+  border-radius: 13px;
+  overflow: hidden;
+}
+.prokodo-PostWidgetCarousel__carousel__item__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.prokodo-PostWidgetCarousel__carousel__item__image__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.prokodo-PostWidgetCarousel__carousel__item__link {
+  position: relative;
+  display: block;
+}
+.prokodo-PostWidgetCarousel__carousel__dots {
+  margin-top: 0;
+}
+.prokodo-PostWidgetCarousel__carousel__buttons {
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  max-width: 100px;
+  gap: 0.5rem;
+  z-index: 2;
+}
+.prokodo-PostWidgetCarousel__headline {
+  margin-top: 0.75rem !important;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+@keyframes gradientShift {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@keyframes indeterminateMove {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+.prokodo-ProgressBar {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-ProgressBar__track {
+  width: 100%;
+  height: 1rem;
+  border-radius: 0.75rem;
+  background-color: var(--color-grey-100);
+  overflow: hidden;
+  box-shadow: var(--elevation-2);
+}
+.prokodo-ProgressBar__bar {
+  height: 100%;
+  width: 0%;
+  background-image: inherit;
+  background-size: 200% 100%;
+  animation: gradientShift 2s linear;
+  transition: width 0.4s ease-out;
+}
+.prokodo-ProgressBar__bar--primary {
+  background-image: var(--gradient-background-primary-secondary);
+}
+.prokodo-ProgressBar__bar--secondary {
+  background-image: var(--gradient-background-secondary);
+}
+.prokodo-ProgressBar__bar--info {
+  background-image: var(--gradient-background-info);
+}
+.prokodo-ProgressBar__bar--success {
+  background-image: var(--gradient-background-success);
+}
+.prokodo-ProgressBar__bar--warning {
+  background-image: var(--gradient-background-warning);
+}
+.prokodo-ProgressBar__bar--error {
+  background-image: var(--gradient-background-error);
+}
+.prokodo-ProgressBar__bar--infinity {
+  animation: gradientShift 2s linear infinite;
+}
+.prokodo-ProgressBar__bar--indeterminate {
+  width: 25%;
+  animation: gradientShift 2s linear, indeterminateMove 2s ease-in-out;
+}
+.prokodo-ProgressBar__bar--indeterminate--infinity {
+  animation: gradientShift 2s linear infinite, indeterminateMove 2s ease-in-out infinite;
+}
+.prokodo-ProgressBar__label {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-ProgressBar--animated .ProgressBar__bar:not(.ProgressBar__bar--indeterminate) {
+  animation: gradientShift 2s linear infinite;
+}
+.prokodo-ProgressBar--animated .ProgressBar__bar--indeterminate {
+  animation: gradientShift 2s linear infinite, indeterminateMove 2s ease-in-out infinite;
+}
+
+.prokodo-Quote {
+  margin: 0;
+}
+.prokodo-Quote__headline {
+  padding-bottom: 1rem;
+}
+.prokodo-Quote__quote {
+  margin: 0;
+}
+.prokodo-Quote__quote__content {
+  margin: 0 0 1rem 0;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: italic;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Quote__quote__content {
+    font-size: 0.875rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Quote__quote__content {
+    font-size: 0.875rem;
+  }
+}
+.prokodo-Quote__caption {
+  display: flex;
+}
+.prokodo-Quote__caption__avatar {
+  margin-right: 1rem;
+}
+.prokodo-Quote__caption__author {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Quote__caption__author__name {
+  color: var(--color-grey-900);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Quote__caption__author__position {
+  padding-top: 0.25rem;
+  color: var(--color-grey-500);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Quote__caption__author__position {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Quote__caption__author__position {
+    font-size: 1rem;
+  }
+}
+.prokodo-Rating {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-Rating--full-width {
+  width: 100%;
+}
+.prokodo-Rating__inner {
+  position: relative;
+}
+.prokodo-Rating__label {
+  padding-bottom: 0.5rem;
+  color: var(--color-grey-600);
+  z-index: 1;
+  pointer-events: none;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Rating__label {
+    font-size: 1.125rem;
+    padding: 0;
+  }
+}
+.prokodo-Rating__field {
+  position: relative;
+}
+.prokodo-Rating__group {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 0;
+}
+.prokodo-Rating__icon {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-grey-300);
+  transition: transform 0.1s ease, color 0.15s ease;
+}
+.prokodo-Rating__icon__symbol {
+  display: inline-block;
+}
+.prokodo-Rating__icon__sr-only {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Rating__icon--filled {
+  color: var(--color-primary-500);
+}
+.prokodo-Rating__icon--selected {
+  transform: scale(1.05);
+}
+.prokodo-Rating__icon--disabled {
+  cursor: not-allowed;
+  color: var(--color-grey-200);
+}
+.prokodo-Rating__icon--readonly {
+  cursor: default;
+}
+.prokodo-Rating__icon:hover {
+  transform: scale(1.05);
+}
+.prokodo-Rating__icon:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+  border-radius: 999px;
+}
+.prokodo-Rating__footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 0.5rem;
+}
+.prokodo-Rating__helperText {
+  width: 100%;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Rating__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Rating__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Rating__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-Rating__helperText__content {
+  width: 100%;
+}
+.prokodo-Rating__helperText__content--is-error {
+  color: var(--color-error);
+}
+
+.prokodo-RichText__a {
+  color: var(--color-primary-500);
+}
+.prokodo-RichText__p {
+  color: var(--color-grey-500);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__p {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__p {
+    font-size: 1rem;
+  }
+}
+.prokodo-RichText__p {
+  text-align: inherit;
+}
+html[data-theme=dark] .prokodo-RichText__p {
+  color: var(--color-grey-700);
+}
+.prokodo-RichText__pre {
+  color: var(--color-grey-500);
+  padding: 0;
+  border: 1px solid var(--color-grey-200);
+  border-radius: 5px;
+  background-color: var(--color-grey-50);
+  overflow-x: auto;
+  overflow-wrap: break-word;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__pre {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__pre {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RichText__pre {
+  text-align: inherit;
+}
+html[data-theme=dark] .prokodo-RichText__pre {
+  color: var(--color-grey-300);
+  background-color: var(--color-grey-50);
+}
+.prokodo-RichText__blockquote {
+  background-color: var(--color-grey-50);
+  border-left: 3px solid var(--color-grey-100);
+  padding: 1px 1rem;
+  margin: 0;
+}
+.prokodo-RichText__ul, .prokodo-RichText__ol {
+  padding: 0;
+  list-style-type: none;
+  color: var(--color-grey-500);
+}
+.prokodo-RichText__li {
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 0.25rem;
+  margin-top: 2px;
+}
+.prokodo-RichText__li__icon {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  margin-right: 0.5rem;
+  padding-top: 2px;
+  line-height: 1;
+}
+.prokodo-RichText__li__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  display: inline;
+}
+.prokodo-RichText__ol__decimal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 19px;
+  height: 19px;
+  background-color: var(--color-primary-500);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary-500);
+  border-radius: 200px;
+  margin-right: 0.5rem;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__ol__decimal {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__ol__decimal {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RichText__ol__decimal {
+  text-align: inherit;
+}
+.prokodo-RichText__ol > li {
+  display: -webkit-box;
+}
+.prokodo-RichText__ol > li icon--inherit {
+  color: var(--color-grey-900);
+}
+.prokodo-RichText__ol > li icon--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-RichText__ol > li icon--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-RichText__ol > li icon--info {
+  color: var(--color-grey-500);
+}
+.prokodo-RichText__ol > li icon--success {
+  color: var(--color-success);
+}
+.prokodo-RichText__ol > li icon--error {
+  color: var(--color-error);
+}
+.prokodo-RichText__ol > li icon--warning {
+  color: var(--color-warning);
+}
+.prokodo-RichText__ol > li icon--white {
+  color: var(--color-white);
+}
+
+/* fade-in / out for the popup ------------------------------------------------ */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.95, 0.8);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95, 0.8);
+  }
+}
+.prokodo-Select {
+  position: relative;
+  /* ───────────────── field (container for button + listbox) */
+  /* ───────────────── toggle button */
+  /* ───────────────── listbox (popup) */
+  /* ───────────────── option item */
+  /* ───────────────── checkbox for multi-select */
+  /* ───────────────── helper / error text */
+}
+.prokodo-Select--fullWidth {
+  width: 100%;
+}
+.prokodo-Select__label {
+  position: relative;
+  transform-origin: top left;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  color: var(--color-primary-500);
+  z-index: 1;
+  pointer-events: none;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__label {
+    position: absolute;
+    left: 1.5rem;
+    top: 1.75rem;
+    padding: 0 0.25rem;
+    /* start centered vertically, at full size */
+    transform: translateY(-150%) scale(0.75);
+    background-color: var(--color-white);
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+.prokodo-Select__field {
+  position: relative;
+  box-shadow: var(--elevation-1);
+  border-radius: 1.5rem;
+  /*   ‘expanded’ state is now driven by a class your JS toggles */
+}
+.prokodo-Select__field--expanded {
+  box-shadow: none;
+}
+.prokodo-Select__button {
+  box-sizing: border-box;
+  width: calc(100% - 0.25rem + 4px);
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  color: var(--color-grey-900);
+  border-radius: 1.5rem;
+  position: relative;
+  background: var(--gradient-border-7);
+  -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: source-over;
+          mask-composite: add;
+  /* hover / focus */
+  /* open state — JS toggles .Select__button--expanded **and**
+     .Select__field--expanded plus aria-expanded="true"          */
+  /* caret / icon (if you still have one) */
+  /* inner text */
+}
+.prokodo-Select__button:hover {
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__button:focus {
+  outline: 0;
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__button:disabled {
+  color: var(--color-grey-300);
+  cursor: default;
+  background: var(--gradient-border-8);
+}
+.prokodo-Select__button:disabled:hover {
+  background: var(--gradient-border-8);
+}
+.prokodo-Select__button--expanded {
+  border-top-left-radius: 1.6875rem;
+  border-top-right-radius: 1.6875rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__button--expanded > .Select__button__inner {
+  border-top-left-radius: 1.5625rem;
+  border-top-right-radius: 1.5625rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.prokodo-Select__button > svg {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 1rem;
+  height: 100%;
+}
+.prokodo-Select__button__inner {
+  display: flex;
+  align-items: center;
+  padding: 0.875rem 1rem;
+  margin: 2px;
+  background: var(--color-white);
+  border-radius: 1.5rem;
+  background-color: var(--color-white);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Select__button__inner {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__button__inner {
+    font-size: 1rem;
+  }
+}
+.prokodo-Select__button__inner {
+  font-size: 1rem;
+}
+.prokodo-Select__button__inner--expanded {
+  border-top-left-radius: 1.5625rem;
+  border-top-right-radius: 1.5625rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.prokodo-Select__button__inner--is-placeholder {
+  color: var(--color-grey-500);
+}
+.prokodo-Select__button__inner--is-placeholder--disabled {
+  color: var(--color-grey-300);
+}
+.prokodo-Select__listbox {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 2px;
+  margin: -2px 0 0 0;
+  overflow: auto;
+  outline: 0;
+  max-height: 225px;
+  width: 100%;
+  color: var(--color-grey-900);
+  border-bottom-left-radius: 1.5625rem;
+  border-bottom-right-radius: 1.5625rem;
+  background: var(--gradient-border-4);
+  box-shadow: var(--elevation-3);
+  scrollbar-width: none;
+  z-index: 10;
+  /* animation – your JS toggles .is-open / .is-closed */
+}
+.prokodo-Select__listbox--is-open {
+  animation: fade-in 200ms ease-out forwards;
+}
+.prokodo-Select__listbox--is-closed {
+  animation: fade-out 200ms ease-in forwards;
+}
+.prokodo-Select__item {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  background: var(--color-white);
+  position: relative;
+  backface-visibility: hidden;
+  margin-top: -2px;
+  perspective: 1000px;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+  /* hover / focus */
+  /* selected */
+  /* disabled (if you add aria-disabled) */
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Select__item {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__item {
+    font-size: 1rem;
+  }
+}
+.prokodo-Select__item {
+  font-size: 1rem;
+}
+.prokodo-Select__item:last-child {
+  border-bottom-left-radius: 1.5625rem;
+  border-bottom-right-radius: 1.5625rem;
+}
+.prokodo-Select__item:hover {
+  background-color: var(--color-grey-50);
+}
+.prokodo-Select__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--selected {
+  background-color: var(--color-primary-50);
+}
+.prokodo-Select__item[aria-disabled=true] {
+  color: var(--color-grey-400);
+  cursor: not-allowed;
+}
+.prokodo-Select__checkbox {
+  position: relative;
+  min-width: 18px;
+  min-height: 18px;
+  margin-right: 0.75rem;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  -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: source-over;
+          mask-composite: add;
+  background: var(--gradient-border-7);
+}
+.prokodo-Select__checkbox:before { /* white inner square */
+  content: "";
+  position: absolute;
+  inset: 2px;
+  background: var(--color-white);
+}
+.prokodo-Select__checkbox--checked { /* gradient + tick mark */
+  background: var(--gradient-border-4);
+}
+.prokodo-Select__checkbox--checked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--gradient-background-primary-grey-secondary);
+  -webkit-mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
+  mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
+}
+.prokodo-Select__helperText {
+  padding-left: 1.5rem;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  width: 80%;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Select__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Select__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-Select__helperText__content {
+  width: 100%;
+}
+.prokodo-Select__helperText__content--is-error {
+  color: var(--color-error);
+}
+
+/* src/components/side-nav/SideNav.module.scss */
+@keyframes label-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes label-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.prokodo-SideNav {
+  --bg: var(--color-white);
+  --shadow: var(--elevation-2);
+  --t: 280ms;
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  background: var(--bg);
+  box-shadow: var(--shadow);
+  /* ───── collapsed → slide to the right leaving only the toggle visible */
+  /* toggle button (always visible!) ------------------------------------- */
+  /* list / items -------------------------------------------------------- */
+}
+.prokodo-SideNav--collapsed {
+  width: 56px;
+}
+.prokodo-SideNav__collape__label {
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-SideNav__collape__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-SideNav__collape__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-SideNav__collape__label--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-SideNav__toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: var(--bg);
+  transition: background-color 120ms;
+  padding: 0.75rem 1rem 0.75rem 0.75rem;
+  border: none;
+  cursor: pointer;
+}
+.prokodo-SideNav__toggle:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  background: var(--gradient-background-primary-secondary);
+}
+.prokodo-SideNav__toggle:hover {
+  background: var(--color-grey-50);
+}
+.prokodo-SideNav__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1 0 auto;
+}
+.prokodo-SideNav__link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem 0.5rem 0.75rem;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  transition: background-color 120ms;
+}
+.prokodo-SideNav__link--is-active, .prokodo-SideNav__link:hover {
+  text-decoration: none;
+  background: var(--color-grey-50);
+}
+.prokodo-SideNav__link--is-active > div:first-of-type, .prokodo-SideNav__link:hover > div:first-of-type {
+  position: relative;
+}
+.prokodo-SideNav__link--is-active > div:first-of-type:before, .prokodo-SideNav__link:hover > div:first-of-type:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--gradient-background-primary);
+  border-radius: 13px;
+  opacity: 0.5;
+}
+.prokodo-SideNav__link[aria-current=page] {
+  background: var(--color-primary-50);
+}
+.prokodo-SideNav__icon__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: var(--color-grey-50);
+  border-radius: 13px;
+}
+.prokodo-SideNav__label {
+  animation: label-in 150ms ease forwards;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-SideNav__label {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-SideNav__label {
+    font-size: 1rem;
+  }
+}
+.prokodo-SideNav__label--collapsed .prokodo-SideNav__label {
+  animation: label-out 150ms ease forwards;
+}
+
+/* Pulse opacity */
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* Shimmer sweep */
+@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) */
+  /* variants */
+  /* animation hooks (keyframes live in effects sheet) */
+}
+.prokodo-Skeleton::after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  left: -100%;
+  background: linear-gradient(90deg, transparent, rgba(var(--color-white), 0.6), transparent);
+}
+.prokodo-Skeleton--text {
+  height: 1em;
+  border-radius: 4px;
+}
+.prokodo-Skeleton--rectangular {
+  border-radius: 4px;
+}
+.prokodo-Skeleton--circular {
+  border-radius: 50%;
+}
+.prokodo-Skeleton--pulse {
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+.prokodo-Skeleton--wave::after {
+  animation: skeleton-wave 1.6s linear infinite;
+}
+.prokodo-Skeleton--none::after {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .prokodo-Skeleton--pulse, .prokodo-Skeleton--wave::after {
+    animation: none !important;
+  }
+}
+
+.prokodo-Slider {
+  padding-bottom: 1.5rem;
+}
+.prokodo-Slider__label {
+  padding-bottom: 2rem;
+}
+.prokodo-Slider__label--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Slider__root {
+  position: relative;
+  width: 100%;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.prokodo-Slider__root--disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.4;
+}
+.prokodo-Slider__rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 6px;
+  opacity: 0.3;
+  z-index: 1;
+  background: var(--gradient-background-primary-grey-secondary);
+}
+.prokodo-Slider__track {
+  position: absolute;
+  height: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 6px;
+  z-index: 2;
+  background: var(--gradient-background-primary-secondary);
+}
+.prokodo-Slider__mark {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #dedede;
+  border-radius: 50%;
+  top: 50%;
+  text-align: center;
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 3;
+}
+.prokodo-Slider__mark__label {
+  position: relative;
+  display: inline-block;
+  bottom: 0;
+  left: 50%;
+  padding-top: 1.5rem;
+  transform: translateX(-50%);
+  color: var(--color-grey-300);
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Slider__mark__label {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Slider__mark__label {
+    font-size: 1rem;
+  }
+}
+.prokodo-Slider__mark__label {
+  text-align: center;
+  font-size: 0.8rem;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Slider__mark__label {
+    position: static;
+    width: auto;
+    height: auto;
+    left: auto;
+    text-indent: inherit;
+    margin-left: 50%;
+    min-width: 100px;
+    font-size: 1rem;
+  }
+}
+.prokodo-Slider__input {
+  /* Native Slider-Optik verbergen, aber Funktion erhalten */
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  position: relative;
+  z-index: 4;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+}
+.prokodo-Slider__input:focus {
+  outline: none;
+}
+.prokodo-Slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 0;
+  height: 0;
+}
+.prokodo-Slider__input::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+}
+.prokodo-Slider__input::-moz-range-thumb {
+  width: 0;
+  height: 0;
+  background: transparent;
+  border: none;
+}
+.prokodo-Slider__input::-moz-range-track {
+  background: transparent;
+  border: none;
+}
+.prokodo-Slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: var(--color-primary-500);
+  transform: translateX(-50%) translateY(-50%);
+  transition: box-shadow 120ms ease, transform 120ms ease;
+  z-index: 3;
+  background: var(--gradient-background-primary-secondary);
+}
+.prokodo-Slider__thumb:hover {
+  box-shadow: 0 0 0 6px rgba(var(--color-primary-500-rgb), 0.3);
+}
+.prokodo-Slider__thumb--focused {
+  box-shadow: 0 0 0 6px rgba(var(--color-primary-700-rgb), 0.3);
+  outline: none;
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 100%;
+}
+.prokodo-Slider__valueText {
+  position: absolute;
+  top: -1.7em;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  z-index: 4;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Snackbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 288px;
+  max-width: 430px;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  box-shadow: var(--elevation-2);
+  background-color: var(--color-grey-900);
+  color: var(--color-white);
+}
+.prokodo-Snackbar--success {
+  background-color: var(--color-success);
+}
+.prokodo-Snackbar--error {
+  background-color: var(--color-error);
+}
+.prokodo-Snackbar--warning {
+  background-color: var(--color-warning);
+  color: var(--color-black);
+}
+.prokodo-Snackbar--info {
+  background-color: var(--color-info);
+}
+.prokodo-Snackbar__message {
+  flex: 1 1;
+}
+.prokodo-Snackbar__action {
+  margin-left: auto;
+}
+.prokodo-Snackbar__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.prokodo-Snackbar__close:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+.prokodo-Snackbar__close:hover {
+  opacity: 0.8;
+}
+.prokodo-Snackbar--readonly {
+  pointer-events: none;
+}
+
+.prokodo-SnackbarProvider {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 8;
+  z-index: 9000;
+  pointer-events: none;
+}
+.prokodo-SnackbarProvider--is-top {
+  top: 0;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  bottom: 0;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.prokodo-SnackbarProvider--is-left {
+  left: 1rem;
+}
+.prokodo-SnackbarProvider--is-right {
+  right: 1rem;
+}
+.prokodo-SnackbarProvider__snackbar {
+  pointer-events: auto;
+}
+.prokodo-SnackbarProvider__snackbar--is-top {
+  margin-top: 1rem;
+}
+.prokodo-SnackbarProvider__snackbar--is-bottom {
+  margin-bottom: 1rem;
+}
+
+.prokodo-Stepper {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 0;
+  height: 100%;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Stepper {
+    width: 100%;
+    flex-direction: row;
+  }
+}
+.prokodo-Stepper__step {
+  position: relative;
+  height: 100%;
+  list-style-type: none;
+  cursor: pointer;
+}
+.prokodo-Stepper__step::after {
+  content: "";
+  position: relative;
+  display: block;
+  margin: -10rem 0 1.25rem 1.25rem;
+  height: calc(100% - 150px);
+  width: 3px;
+  background: var(--gradient-border-7);
+  transform: translateY(-50%);
+  opacity: 0.5;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Stepper__step {
+    width: 100%;
+  }
+  .prokodo-Stepper__step::after {
+    position: absolute;
+    top: 1.25rem;
+    margin: 0;
+    left: auto;
+    height: 3px;
+    width: calc(100% - 80px);
+    transform: translateX(-50%);
+  }
+}
+.prokodo-Stepper__step:first-child::after {
+  display: none;
+}
+.prokodo-Stepper__step--is-active::after {
+  background: var(--gradient-border-5);
+}
+.prokodo-Stepper__icon {
+  display: block !important;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.prokodo-Stepper__icon__sr__only {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Stepper__icon__container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  margin-bottom: 0.75rem;
+}
+.prokodo-Stepper__icon__container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  padding: 3px;
+  background: var(--gradient-border-7);
+  -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
+          mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+}
+.prokodo-Stepper__icon__container--is-active {
+  box-shadow: var(--elevation-1);
+}
+.prokodo-Stepper__icon__container--is-active::before {
+  background: var(--gradient-border-1);
+  padding: 4px;
+}
+.prokodo-Stepper__icon__container--is-active::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+  border-radius: inherit;
+  box-shadow: var(--elevation-1--inset);
+}
+.prokodo-Stepper__icon__container:focus {
+  border-radius: 9999px;
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Stepper__icon__label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-grey-700);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Stepper__icon__label--is-active {
+  color: var(--color-grey-900);
+}
+.prokodo-Stepper__icon__completed {
+  visibility: hidden;
+}
+.prokodo-Stepper__icon__completed__container {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+.prokodo-Stepper__icon__completed__container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7" stroke="black"></path></svg>') no-repeat center;
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7" stroke="black"></path></svg>') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background: var(--gradient-background-primary-grey-secondary);
+}
+.prokodo-Stepper__label {
+  text-align: center;
+  align-items: flex-start;
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+  font-family: !important;
+  font-size: 1rem !important;
+  line-height: 1.45 !important;
+  color: var(--color-grey-600) !important;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Stepper__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Stepper__label {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Stepper__label--is-active {
+  color: var(--color-grey-800) !important;
+}
+.prokodo-Stepper__label__text {
+  color: var(--color-grey-700) !important;
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Stepper__label__text--is-active {
+  color: var(--color-grey-900) !important;
+}
+@media screen and (min-width: 375px) {
+  .prokodo-Stepper__label__text {
+    position: static;
+    width: auto;
+    height: auto;
+    left: auto;
+    text-indent: inherit;
+  }
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Stepper__label {
+    align-items: center;
+    font-weight: 400;
+    font-size: 1rem;
+    font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-style: normal;
+    line-height: 1.4;
+    letter-spacing: 0.03em;
+    text-transform: none;
+    text-align: left;
+    text-decoration: none;
+  }
+}
+.prokodo-Switch {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.prokodo-Switch__label {
+  width: 100%;
+  display: grid;
+  font-size: 1rem;
+  grid-template-columns: 100%;
+  grid-gap: 16px;
+  gap: 16px;
+  padding-bottom: 0;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Switch__label {
+    grid-template-columns: 80% 20%;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Switch__label {
+    grid-template-columns: 90% 10%;
+  }
+}
+.prokodo-Switch__label__content {
+  padding-right: 1rem;
+}
+.prokodo-Switch__control {
+  position: relative;
+  width: 42px;
+  height: 26px;
+  min-width: 42px;
+  background-color: var(--color-grey-500);
+  border-radius: 13px;
+  transition: background-color 0.3s ease;
+}
+.prokodo-Switch__control:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+  border-radius: 13px;
+}
+.prokodo-Switch__control--checked {
+  background: var(--gradient-border-4);
+}
+.prokodo-Switch__control--disabled {
+  background-color: var(--color-grey-300);
+  cursor: not-allowed;
+}
+.prokodo-Switch__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  z-index: 2; /* over track but under thumb */
+}
+.prokodo-Switch__thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px; /* default (unchecked) */
+  width: 22px;
+  height: 22px;
+  background-color: #FFFFFF;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  z-index: 3; /* always on top */
+  /* If checked, shift thumb to the right */
+}
+.prokodo-Switch__thumb--checked {
+  transform: translateY(-50%) translateX(13px);
+  left: 5px;
+}
+.prokodo-Switch__thumb--disabled {
+  background-color: var(--color-grey-200);
+}
+.prokodo-Switch__thumb {
+  /* Center child icon */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.prokodo-Switch__icon__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.prokodo-Switch__icon--primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Switch__icon--secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Switch__icon--success {
+  color: var(--color-success);
+}
+.prokodo-Switch__icon--error {
+  color: var(--color-error);
+}
+.prokodo-Switch__icon--info {
+  color: var(--color-grey-300);
+}
+.prokodo-Switch__icon--warning {
+  color: var(--color-warning);
+}
+.prokodo-Switch__track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-grey-300);
+  border-radius: 13px;
+  transition: background-color 0.3s ease;
+  z-index: 1;
+}
+.prokodo-Switch__track--checked {
+  background-color: var(--color-primary-500);
+}
+.prokodo-Switch__track--disabled {
+  background-color: var(--color-grey-200);
+}
+
+.prokodo-Table {
+  padding-bottom: 1.5rem;
+  padding-left: 1.25rem;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Table {
+    padding-left: 0;
+  }
+}
+.prokodo-Table__container {
+  overflow: visible;
+}
+.prokodo-Table__headline {
+  margin-left: -40px;
+}
+.prokodo-Table__content {
+  padding-left: 1.5rem;
+}
+.prokodo-Table__table {
+  table-layout: auto;
+  border-collapse: collapse;
+}
+.prokodo-Table__table__wrapper {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.prokodo-Table__head__row {
+  border-bottom: 1px solid var(--color-grey-200);
+}
+.prokodo-Table__head__cell {
+  padding: 1.5rem 0.5rem;
+  font-weight: 500;
+  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-Table__head__cell {
+  text-align: center;
+}
+.prokodo-Table__head__cell:first-child {
+  color: var(--color-primary-500);
+  text-align: left;
+}
+.prokodo-Table__body__row {
+  border-bottom: 1px solid var(--color-grey-200);
+}
+.prokodo-Table__body__row--has-link:hover {
+  background: var(--color-grey-50);
+}
+.prokodo-Table__body__row--has-link:focus {
+  background: var(--color-grey-50);
+}
+.prokodo-Table__caption {
+  color: var(--color-grey-300);
+  text-align: right;
+  opacity: 0;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Table__caption {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Table__caption {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.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.55;
+  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;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-TableCell__inner {
+    font-size: 1rem;
+  }
+}
+.prokodo-TableCell:first-child > span {
+  font-weight: 500;
+  text-align: left;
+  align-items: baseline;
+}
+.prokodo-TableCell__icon {
+  padding-bottom: 1rem;
+}
+
+.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.55;
+  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;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Teaser__content {
+    font-size: 1rem;
+  }
+}
+.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;
+}