@oiz/stzh-components 0.0.0-pretest → 1.4.0-npmjstest

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.css

@@ -78,584 +78,584 @@
 /**
  * Fonts
  */
-/* Global css (mainly used to provide sensible defaults and helper classes) */
-
-html {
-  /* Enable font smoothing */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  /* Remove default body spacing */
-  margin: 0;
-  padding: 0;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-.stzh-dialog-open,
-.stzh-overlay-open {
-  touch-action: none;
-  -webkit-overflow-scrolling: none;
-  overflow: hidden;
-  padding-right: var(--stzh-scrollbar-width);
-  overscroll-behavior: none;
-}
-
-@media screen and (max-width: 599px) {
-  .stzh-popover-open {
-    touch-action: none;
-    -webkit-overflow-scrolling: none;
-    overflow: hidden;
-    padding-right: var(--stzh-scrollbar-width);
-    overscroll-behavior: none;
-  }
-}
-
-/* default outline value, which will be applied to all elements receiving focus
-the .has-focus class is used by the focus target */
-.stzh-flyingfocus-enabled :focus,
-.stzh-flyingfocus-enabled .has-focus {
-  outline: var(--stzh-color-primary) solid 0.125rem;
-  outline-offset: 0.3125rem;
-}
-
-/* thicker border for primary buttons */
-.stzh-flyingfocus-enabled stzh-button[variant="primary"].has-focus {
-  outline: var(--stzh-color-primary) solid 0.1875rem;
-  outline-offset: 0.25rem;
-}
-
-.stzh-flyingfocus-enabled stzh-input.has-focus,
-.stzh-flyingfocus-enabled stzh-dropdown.has-focus {
-  outline-offset: 0.4375rem;
-}
-
-.stzh-fylingfocus-focused {
-  outline-style: none !important;
-}
-
-.stzh-fylingfocus-focused::-moz-focus-inner {
-  border: 0 !important;
-}
-
-/* Global CSS properties */
-
-:root {
-  /* Colors */
-  --stzh-color-zueriblue: #0F05A0;
-
-  --stzh-color-zueriblue48: rgba(15, 5, 160, 0.48);
-  --stzh-color-zueriblue32: rgba(15, 5, 160, 0.32);
-  --stzh-color-zueriblue16: rgba(15, 5, 160, 0.16);
-  --stzh-color-zueriblue8: rgba(15, 5, 160, 0.08);
-  --stzh-color-zueriblue4: rgba(15, 5, 160, 0.04);
-
-  --stzh-color-zueribluedark: #070250;
-
-  --stzh-color-white: #FFFFFF;
-  --stzh-color-white48: rgba(255, 255, 255, 0.48);
-  --stzh-color-white32: rgba(255, 255, 255, 0.32);
-  --stzh-color-white16: rgba(255, 255, 255, 0.16);
-  --stzh-color-white8: rgba(255, 255, 255, 0.08);
-
-  --stzh-color-black: #000000;
-  --stzh-color-black48: rgba(0, 0, 0, 0.48);
-  --stzh-color-black32: rgba(0, 0, 0, 0.32);
-  --stzh-color-black16: rgba(0, 0, 0, 0.16);
-  --stzh-color-black8: rgba(0, 0, 0, 0.08);
-
-  --stzh-color-cucumber: #80ad52;
-  --stzh-color-truegreen: #008000;
-  --stzh-color-shiraz: #c00d23;
-  --stzh-color-error: #d0021b;
-  --stzh-color-warning: #F28B00;
-  --stzh-color-active: #a4c400;
-
-  --stzh-color-grey5: #F2F2F2;
-  --stzh-color-grey13: #DEDEDE;
-  --stzh-color-grey25: #BFBFBF;
-  --stzh-color-grey40: #999999;
-  --stzh-color-grey55: #737373;
-  --stzh-color-grey61: #646464;
-  --stzh-color-grey70: #4D4D4D;
-  --stzh-color-grey87: #222222;
-
-  --stzh-color-aoz-agenda: #2f8e87;
-  --stzh-color-aoz-agenda-hover: #216664;
-  --stzh-color-cool-grey60: #5C7781;
-  --stzh-color-cool-grey60-hover: #344F59;
-  --stzh-color-cobalt-blue60: #0353DC;
-  --stzh-color-cobalt-blue60-hover: #00338D;
-  --stzh-color-shamrock-green70: #06751E;
-  --stzh-color-shamrock-green70-hover: #054D14;
-  --stzh-color-lime-green80: #3A6413;
-  --stzh-color-lime-green80-hover: #26410C;
-  --stzh-color-magenta70: #960055;
-  --stzh-color-magenta70-hover: #660033;
-  --stzh-color-ocher70: #9A5B01;
-  --stzh-color-ocher70-hover: #5A3600;
-  --stzh-color-orange: #F28B00;
-  --stzh-color-orange-hover: #915300;
-  --stzh-color-orange70: #B23A01;
-  --stzh-color-orange70-hover: #6F261F;
-  --stzh-color-red: #A51A0F;
-  --stzh-color-red-hover: #630F09;
-  --stzh-color-red60: #DC030E;
-  --stzh-color-red60-hover: #A20309;
-  --stzh-color-violet70: #512380;
-  --stzh-color-violet70-hover: #2d1348;
-  --stzh-color-winered: #89072A;
-  --stzh-color-winered-hover: #520419;
-
-  --stzh-color-primary: var(--stzh-color-zueriblue);
-  --stzh-color-primary-hover: var(--stzh-color-zueribluedark);
-
-  --stzh-color-primary48: var(--stzh-color-zueriblue48);
-  --stzh-color-primary32: var(--stzh-color-zueriblue32);
-  --stzh-color-primary16: var(--stzh-color-zueriblue16);
-  --stzh-color-primary8: var(--stzh-color-zueriblue8);
-  --stzh-color-primary4: var(--stzh-color-zueriblue4);
-
-    /* AOZ */
-    --stzh-color-tabasco: #A51A0F;
-    --stzh-color-mahogany: #630F09;
-
-    /* UVZ */
-    --stzh-color-monza: #C30024;
-    --stzh-color-venetianred: #750015;
-    --stzh-color-scienceblue: #006DC5;
-
-    /* VBZ */
-    --stzh-color-deepcerulean: #057FAC;
-    --stzh-color-regalblue: #034C67;
-    --stzh-color-coral: #E4694C;
-
-    /* PKZH */
-    --stzh-color-shakespeare: #4A96C8;
-    --stzh-color-chambray: #2C5A78;
-
-  /* Font */
-  --stzh-font-family-light: 'HelveticaNeueLTW01_41488878', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-font-family-regular: 'HelveticaNeueLTW01_55Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-font-family-medium: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-font-family-bold: 'HelveticaNeueLTW01_71488914', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-font-family-heavy: 'HelveticaNeueLTW05_85Heavy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-font-family-title: var(--stzh-font-family-heavy);
-
-  --stzh-font-weight-light: normal;
-  --stzh-font-weight-regular: normal;
-  --stzh-font-weight-medium: normal;
-  --stzh-font-weight-bold: normal;
-  --stzh-font-weight-heavy: normal;
-  --stzh-font-weight-title: normal;
-
-  --stzh-font-femto-font-size: 0.625rem;
-  --stzh-font-femto-text-line-height: 1;
-
-  --stzh-font-pico-font-size: 0.75rem;
-  --stzh-font-pico-text-line-height: 1.6;
-  --stzh-font-pico-heading-letter-spacing: 0.01em;
-
-  --stzh-font-nano-font-size: 0.8125rem;
-  --stzh-font-nano-text-line-height: 1.6;
-  --stzh-font-nano-heading-line-height: 1.4;
-  --stzh-font-nano-heading-letter-spacing: 0.01em;
-
-  --stzh-font-micro-font-size: 0.875rem;
-  --stzh-font-micro-text-line-height: 1.6;
-  --stzh-font-micro-heading-line-height: 1.4;
-  --stzh-font-micro-heading-letter-spacing: 0.01em;
-
-  --stzh-font-milli-font-size: 1rem;
-  --stzh-font-milli-text-line-height: 1.6;
-  --stzh-font-milli-heading-line-height: 1.4;
-
-  --stzh-font-centi-font-size: 1.125rem;
-  --stzh-font-centi-text-line-height: 1.6;
-  --stzh-font-centi-heading-line-height: 1.4;
-
-  --stzh-font-deci-font-size: 1.25rem;
-  --stzh-font-deci-text-line-height: 1.6;
-  --stzh-font-deci-heading-line-height: 1.4;
-
-  --stzh-font-regular-font-size: 1.375rem;
-  --stzh-font-regular-text-line-height: 1.6;
-  --stzh-font-regular-heading-line-height: 1.4;
-
-  --stzh-font-deca-font-size: 1.5rem;
-  --stzh-font-deca-text-line-height: 1.2;
-  --stzh-font-deca-text-letter-spacing: -0.01em;
-
-  --stzh-font-hecto-font-size: 1.75rem;
-  --stzh-font-hecto-text-line-height: 1.2;
-  --stzh-font-hecto-text-letter-spacing: -0.01em;
-
-  --stzh-font-kilo-font-size: 2rem;
-  --stzh-font-kilo-text-line-height: 1.2;
-  --stzh-font-kilo-text-letter-spacing: -0.01em;
-
-  --stzh-font-mega-font-size: 2.5rem;
-  --stzh-font-mega-text-line-height: 1.2;
-  --stzh-font-mega-text-letter-spacing: -0.01em;
-
-  --stzh-font-giga-font-size: 2.8125rem;
-  --stzh-font-giga-text-line-height: 1.2;
-  --stzh-font-giga-text-letter-spacing: -0.01em;
-
-  --stzh-font-hero-font-size: 3.75rem;
-  --stzh-font-hero-text-line-height: 1.1;
-  --stzh-font-hero-text-letter-spacing: -0.01em;
-
-  /* Z-Index */
-  --stzh-z-index-deep: -999999;
-  --stzh-z-index-default: 1;
-  --stzh-z-index-masked: 100;
-  --stzh-z-index-mask: 200;
-  --stzh-z-index-sticky: 300;
-  --stzh-z-index-header: 400;
-  --stzh-z-index-toast: 500;
-  --stzh-z-index-popover: 600;
-  --stzh-z-index-dialog: 700;
-  --stzh-z-index-popup: 800;
-  --stzh-z-index-overlay: 900;
-
-  /* Spaces */
-  --stzh-space-xxxsmall: 0.125rem;
-  --stzh-space-xxsmall: 0.25rem;
-  --stzh-space-xsmall: 0.5rem;
-  --stzh-space-small: 0.75rem;
-  --stzh-space-medium: 1rem;
-  --stzh-space-large: 1.25rem;
-  --stzh-space-xlarge: 1.5rem;
-  --stzh-space-xxlarge: 2rem;
-  --stzh-space-xxxlarge: 2.5rem;
-  --stzh-space-xxxxlarge: 3rem;
-  --stzh-space-big: 3.5rem;
-  --stzh-space-xbig: 4rem;
-  --stzh-space-huge: 5rem;
-  --stzh-space-xhuge: 6rem;
-
-  --stzh-space-none: 0.00001rem;
-
-  --stzh-space-default: var(--stzh-space-medium);
-
-  /* Box Shadows */
-  --stzh-box-shadow-header: 0 -0.125rem 1rem rgba(0, 0, 0, 0.16);
-  --stzh-box-shadow-popover: 0 0 0.25rem rgba(0, 0, 0, 0.24);
-  --stzh-box-shadow-message: 0 0 0.5rem rgba(0, 0, 0, 0.24);
-  --stzh-box-shadow-overlay: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.32);
-
-  /* Icon sizes */
-  --stzh-icon-size-xxsmall: 0.75rem;
-  --stzh-icon-size-xsmall: 1rem;
-  --stzh-icon-size-small: 1.25rem;
-  --stzh-icon-size-medium: 1.5rem;
-  --stzh-icon-size-large: 2.25rem;
-  --stzh-icon-size-xlarge: 3rem;
-
-  --stzh-icon-size-default: var(--stzh-icon-size-small);
-
-  /* Gutter */
-
-  --stzh-grid-gutter: 1rem;
-  --stzh-grid-gutter-small: 1.25rem;
-  --stzh-grid-gutter-medium: 1.5rem;
-
-  /* Base */
-  --stzh-base-color: var(--stzh-color-grey61);
-  --stzh-base-invert-color: var(--stzh-color-white);
-
-  --stzh-base-lead-color: var(--stzh-color-grey70);
-  --stzh-base-border-color: var(--stzh-color-grey13);
-  --stzh-base-vector-effect: non-scaling-stroke;
-  --stzh-base-transition-animation-speed: 0.3s;
-
-  /* Links */
-  --stzh-link-color: var(--stzh-color-primary);
-  --stzh-link-hover-color: var(--stzh-color-primary-hover);
-  --stzh-link-icon-wrapper-height: 1em;
-
-  /* Buttons */
-  --stzh-button-border-radius: 0.1875rem;
-  --stzh-button-text-hover-background: rgba(15, 5, 160, 0.08);
-
-  /* Richttext */
-  --stzh-richttext-blockquote-color: var(--stzh-color-primary);
-  --stzh-richttext-blockquote-line-color: var(--stzh-color-primary);
-  --stzh-richttext-blockquote-footer-color: var(--stzh-color-grey55);
-
-  /* Section */
-  --stzh-section-background-color: transparent;
-  --stzh-section-highlight-background-color: var(--stzh-color-grey5);
-  --stzh-section-highlight-horizontal-padding: var(--stzh-space-medium);
-
-  /* Heading */
-  --stzh-heading-color: var(--stzh-color-primary);
-
-  /* Table */
-  --stzh-table-max-height: none;
-  --stzh-table-min-width: 43.75rem;
-  --stzh-table-cell-padding: var(--stzh-space-small) var(--stzh-space-medium);
-  --stzh-table-input-width: 11rem;
-
-  /* Menu Item */
-  --stzh-menu-item-height: 2.375rem;
-
-  /* Inputs / Buttons / Select */
-  --stzh-form-input-border-radius: 0.125rem;
-  --stzh-form-input-height: 3rem;
-  --stzh-form-input-small-height: 2.5rem;
-  --stzh-form-input-tiny-height: 2rem;
-
-  /* Popover */
-  --stzh-popover-width: 13.9375rem;
-  --stzh-popover-min-width: initial;
-  --stzh-popover-max-width: initial;
-  --stzh-popover-border-radius: 0.1875rem;
-
-  /* Tooltips */
-  --stzh-tooltip-width: auto;
-  --stzh-tooltip-min-width: initial;
-  --stzh-tooltip-max-width: 20.875rem;
-  --stzh-tooltip-padding: var(--stzh-space-small);
-  --stzh-tooltip-border-radius: 0.1875rem;
-  --stzh-tooltip-drop-shadow: drop-shadow(0 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
-
-  /* Accordion */
-  --stzh-accordion-content-padding: var(--stzh-space-medium);
-  --stzh-accordion-content-background: var(--stzh-color-grey5);
-}
-
-.stzh-theme-aoz {
-  --stzh-color-primary: var(--stzh-color-tabasco);
-  --stzh-color-primary-hover: var(--stzh-color-mahogany);
-
-  --stzh-color-primary48: rgba(165, 26, 15, 0.48);
-  --stzh-color-primary32: rgba(165, 26, 15, 0.32);
-  --stzh-color-primary16: rgba(165, 26, 15, 0.16);
-  --stzh-color-primary8: rgba(165, 26, 15, 0.08);
-  --stzh-color-primary4: rgba(165, 26, 15, 0.04);
-
-  --stzh-button-text-hover-background: rgba(165, 26, 15, 0.08);
-}
-
-.stzh-theme-vbz {
-  --stzh-color-primary: var(--stzh-color-deepcerulean);
-  --stzh-color-primary-hover: var(--stzh-color-regalblue);
-
-  --stzh-color-primary48: rgba(5, 127, 172, 0.48);
-  --stzh-color-primary32: rgba(5, 127, 172, 0.32);
-  --stzh-color-primary16: rgba(5, 127, 172, 0.16);
-  --stzh-color-primary8: rgba(5, 127, 172, 0.08);
-  --stzh-color-primary4: rgba(5, 127, 172, 0.04);
-
-  --stzh-font-family-heavy: var(--stzh-font-family-bold);
-  --stzh-font-family-title: var(--stzh-font-family-light);
-
-  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);
-}
-
-.stzh-theme-uvz {
-  --stzh-color-primary: var(--stzh-color-monza);
-  --stzh-color-primary-hover: var(--stzh-color-venetianred);
-
-  --stzh-color-primary48: rgba(195, 0, 36, 0.48);
-  --stzh-color-primary32: rgba(195, 0, 36, 0.32);
-  --stzh-color-primary16: rgba(195, 0, 36, 0.16);
-  --stzh-color-primary8: rgba(195, 0, 36, 0.08);
-  --stzh-color-primary4: rgba(195, 0, 36, 0.04);
-
-  --stzh-button-text-hover-background: rgba(195, 0, 36, 0.08);
-  --stzh-link-color: var(--stzh-color-scienceblue);
-  --stzh-heading-color: var(--stzh-color-black);
-}
-
-.stzh-theme-pkzh {
-  --stzh-pkzh-font-family: Verdana, 'Geneva', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-  --stzh-color-primary: var(--stzh-color-shakespeare);
-  --stzh-color-primary-hover: var(--stzh-color-chambray);
-
-  --stzh-color-primary48: rgba(74, 150, 200, 0.48);
-  --stzh-color-primary32: rgba(74, 150, 200, 0.32);
-  --stzh-color-primary16: rgba(74, 150, 200, 0.16);
-  --stzh-color-primary8: rgba(74, 150, 200, 0.08);
-  --stzh-color-primary4: rgba(74, 150, 200, 0.04);
-
-  --stzh-font-family-light: var(--stzh-pkzh-font-family);
-  --stzh-font-family-regular: var(--stzh-pkzh-font-family);
-  --stzh-font-family-medium: var(--stzh-pkzh-font-family);
-  --stzh-font-family-bold: var(--stzh-pkzh-font-family);
-  --stzh-font-family-heavy: var(--stzh-pkzh-font-family);
-
-  --stzh-font-weight-light: 300;
-  --stzh-font-weight-regular: normal;
-  --stzh-font-weight-medium: 500;
-  --stzh-font-weight-bold: 700;
-  --stzh-font-weight-heavy: 800;
-
-  --stzh-button-text-hover-background: rgba(74, 150, 200, 0.08);
-}
-
-.stzh-theme-ms-aoz-agenda {
-  --stzh-color-primary: var(--stzh-color-aoz-agenda);
-  --stzh-color-primary-hover: var(--stzh-color-aoz-agenda-hover);
-
-  --stzh-color-primary48: rgba(47, 142, 135, 0.48);
-  --stzh-color-primary32: rgba(47, 142, 135, 0.32);
-  --stzh-color-primary16: rgba(47, 142, 135, 0.16);
-  --stzh-color-primary8: rgba(47, 142, 135, 0.08);
-  --stzh-color-primary4: rgba(47, 142, 135, 0.04);
-}
-
-.stzh-theme-ms-cool-grey60 {
-  --stzh-color-primary: var(--stzh-color-cool-grey60);
-  --stzh-color-primary-hover: var(--stzh-color-cool-grey60-hover);
-
-  --stzh-color-primary48: rgba(92, 119, 129, 0.48);
-  --stzh-color-primary32: rgba(92, 119, 129, 0.32);
-  --stzh-color-primary16: rgba(92, 119, 129, 0.16);
-  --stzh-color-primary8: rgba(92, 119, 129, 0.08);
-  --stzh-color-primary4: rgba(92, 119, 129, 0.04);
-}
-
-.stzh-theme-ms-cobalt-blue60 {
-  --stzh-color-primary: var(--stzh-color-cobalt-blue60);
-  --stzh-color-primary-hover: var(--stzh-color-cobalt-blue60-hover);
-
-  --stzh-color-primary48: rgba(3, 83, 220, 0.48);
-  --stzh-color-primary32: rgba(3, 83, 220, 0.32);
-  --stzh-color-primary16: rgba(3, 83, 220, 0.16);
-  --stzh-color-primary8: rgba(3, 83, 220, 0.08);
-  --stzh-color-primary4: rgba(3, 83, 220, 0.04);
-}
-
-.stzh-theme-ms-shamrock-green70 {
-  --stzh-color-primary: var(--stzh-color-shamrock-green70);
-  --stzh-color-primary-hover: var(--stzh-color-shamrock-green70-hover);
-
-  --stzh-color-primary48: rgba(6, 117, 30, 0.48);
-  --stzh-color-primary32: rgba(6, 117, 30, 0.32);
-  --stzh-color-primary16: rgba(6, 117, 30, 0.16);
-  --stzh-color-primary8: rgba(6, 117, 30, 0.08);
-  --stzh-color-primary4: rgba(6, 117, 30, 0.04);
-}
-
-.stzh-theme-ms-lime-green80 {
-  --stzh-color-primary: var(--stzh-color-lime-green80);
-  --stzh-color-primary-hover: var(--stzh-color-lime-green80-hover);
-
-  --stzh-color-primary48: rgba(58, 100, 19, 0.48);
-  --stzh-color-primary32: rgba(58, 100, 19, 0.32);
-  --stzh-color-primary16: rgba(58, 100, 19, 0.16);
-  --stzh-color-primary8: rgba(58, 100, 19, 0.08);
-  --stzh-color-primary4: rgba(58, 100, 19, 0.04);
-}
-
-.stzh-theme-ms-magenta70 {
-  --stzh-color-primary: var(--stzh-color-magenta70);
-  --stzh-color-primary-hover: var(--stzh-color-magenta70-hover);
-
-  --stzh-color-primary48: rgba(150, 0, 85, 0.48);
-  --stzh-color-primary32: rgba(150, 0, 85, 0.32);
-  --stzh-color-primary16: rgba(150, 0, 85, 0.16);
-  --stzh-color-primary8: rgba(150, 0, 85, 0.08);
-  --stzh-color-primary4: rgba(150, 0, 85, 0.04);
-}
-
-.stzh-theme-ms-ocher70 {
-  --stzh-color-primary: var(--stzh-color-ocher70);
-  --stzh-color-primary-hover: var(--stzh-color-ocher70-hover);
-
-  --stzh-color-primary48: rgba(154, 91, 1, 0.48);
-  --stzh-color-primary32: rgba(154, 91, 1, 0.32);
-  --stzh-color-primary16: rgba(154, 91, 1, 0.16);
-  --stzh-color-primary8: rgba(154, 91, 1, 0.08);
-  --stzh-color-primary4: rgba(154, 91, 1, 0.04);
-}
-
-.stzh-theme-ms-orange {
-  --stzh-color-primary: var(--stzh-color-orange);
-  --stzh-color-primary-hover: var(--stzh-color-orange-hover);
-
-  --stzh-color-primary48: rgba(242, 139, 0, 0.48);
-  --stzh-color-primary32: rgba(242, 139, 0, 0.32);
-  --stzh-color-primary16: rgba(242, 139, 0, 0.16);
-  --stzh-color-primary8: rgba(242, 139, 0, 0.08);
-  --stzh-color-primary4: rgba(242, 139, 0, 0.04);
-}
-
-.stzh-theme-ms-orange70 {
-  --stzh-color-primary: var(--stzh-color-orange70);
-  --stzh-color-primary-hover: var(--stzh-color-orange70-hover);
-
-  --stzh-color-primary48: rgba(178, 58, 1, 0.48);
-  --stzh-color-primary32: rgba(178, 58, 1, 0.32);
-  --stzh-color-primary16: rgba(178, 58, 1, 0.16);
-  --stzh-color-primary8: rgba(178, 58, 1, 0.08);
-  --stzh-color-primary4: rgba(178, 58, 1, 0.04);
-}
-
-.stzh-theme-ms-red {
-  --stzh-color-primary: var(--stzh-color-red);
-  --stzh-color-primary-hover: var(--stzh-color-red-hover);
-
-  --stzh-color-primary48: rgba(165, 26, 15, 0.48);
-  --stzh-color-primary32: rgba(165, 26, 15, 0.32);
-  --stzh-color-primary16: rgba(165, 26, 15, 0.16);
-  --stzh-color-primary8: rgba(165, 26, 15, 0.08);
-  --stzh-color-primary4: rgba(165, 26, 15, 0.04);
-}
-
-.stzh-theme-ms-red60 {
-  --stzh-color-primary: var(--stzh-color-red60);
-  --stzh-color-primary-hover: var(--stzh-color-red60-hover);
-
-  --stzh-color-primary48: rgba(220, 3, 14, 0.48);
-  --stzh-color-primary32: rgba(220, 3, 14, 0.32);
-  --stzh-color-primary16: rgba(220, 3, 14, 0.16);
-  --stzh-color-primary8: rgba(220, 3, 14, 0.08);
-  --stzh-color-primary4: rgba(220, 3, 14, 0.04);
-}
-
-.stzh-theme-ms-violet70 {
-  --stzh-color-primary: var(--stzh-color-violet70);
-  --stzh-color-primary-hover: var(--stzh-color-violet70-hover);
-
-  --stzh-color-primary48: rgba(81, 35, 128, 0.48);
-  --stzh-color-primary32: rgba(81, 35, 128, 0.32);
-  --stzh-color-primary16: rgba(81, 35, 128, 0.16);
-  --stzh-color-primary8: rgba(81, 35, 128, 0.08);
-  --stzh-color-primary4: rgba(81, 35, 128, 0.04);
-}
-
-.stzh-theme-ms-winered {
-  --stzh-color-primary: var(--stzh-color-winered);
-  --stzh-color-primary-hover: var(--stzh-color-winered-hover);
-
-  --stzh-color-primary48: rgba(137, 7, 42, 0.48);
-  --stzh-color-primary32: rgba(137, 7, 42, 0.32);
-  --stzh-color-primary16: rgba(137, 7, 42, 0.16);
-  --stzh-color-primary8: rgba(137, 7, 42, 0.08);
-  --stzh-color-primary4: rgba(137, 7, 42, 0.04);
-}
-
-.stzh-theme-ma {
-  background-color: var(--stzh-color-grey5);
-
-  /* overwrite p1 and p2 font curves to be always the same size */
-  --stzh-font-curve-p1-medium-font-size: var(--stzh-font-milli-font-size);
-  --stzh-font-curve-p1-medium-text-line-height: var(--stzh-font-milli-text-line-height);
-  --stzh-font-curve-p1-medium-heading-line-height: var(--stzh-font-milli-heading-line-height);
-  --stzh-font-curve-p2-medium-font-size: var(--stzh-font-micro-font-size);
-  --stzh-font-curve-p2-medium-text-line-height: var(--stzh-font-micro-text-line-height);
-  --stzh-font-curve-p2-medium-heading-line-height: var(--stzh-font-micro-heading-line-height);
-  --stzh-font-curve-p2-medium-heading-letter-spacing: var(--stzh-font-micro-heading-letter-spacing);
-}
+/* Global css (mainly used to provide sensible defaults and helper classes) */
+
+html {
+  /* Enable font smoothing */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  /* Remove default body spacing */
+  margin: 0;
+  padding: 0;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.stzh-dialog-open,
+.stzh-overlay-open {
+  touch-action: none;
+  -webkit-overflow-scrolling: none;
+  overflow: hidden;
+  padding-right: var(--stzh-scrollbar-width);
+  overscroll-behavior: none;
+}
+
+@media screen and (max-width: 599px) {
+  .stzh-popover-open {
+    touch-action: none;
+    -webkit-overflow-scrolling: none;
+    overflow: hidden;
+    padding-right: var(--stzh-scrollbar-width);
+    overscroll-behavior: none;
+  }
+}
+
+/* default outline value, which will be applied to all elements receiving focus
+the .has-focus class is used by the focus target */
+.stzh-flyingfocus-enabled :focus,
+.stzh-flyingfocus-enabled .has-focus {
+  outline: var(--stzh-color-primary) solid 0.125rem;
+  outline-offset: 0.3125rem;
+}
+
+/* thicker border for primary buttons */
+.stzh-flyingfocus-enabled stzh-button[variant="primary"].has-focus {
+  outline: var(--stzh-color-primary) solid 0.1875rem;
+  outline-offset: 0.25rem;
+}
+
+.stzh-flyingfocus-enabled stzh-input.has-focus,
+.stzh-flyingfocus-enabled stzh-dropdown.has-focus {
+  outline-offset: 0.4375rem;
+}
+
+.stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+
+.stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+/* Global CSS properties */
+
+:root {
+  /* Colors */
+  --stzh-color-zueriblue: #0F05A0;
+
+  --stzh-color-zueriblue48: rgba(15, 5, 160, 0.48);
+  --stzh-color-zueriblue32: rgba(15, 5, 160, 0.32);
+  --stzh-color-zueriblue16: rgba(15, 5, 160, 0.16);
+  --stzh-color-zueriblue8: rgba(15, 5, 160, 0.08);
+  --stzh-color-zueriblue4: rgba(15, 5, 160, 0.04);
+
+  --stzh-color-zueribluedark: #070250;
+
+  --stzh-color-white: #FFFFFF;
+  --stzh-color-white48: rgba(255, 255, 255, 0.48);
+  --stzh-color-white32: rgba(255, 255, 255, 0.32);
+  --stzh-color-white16: rgba(255, 255, 255, 0.16);
+  --stzh-color-white8: rgba(255, 255, 255, 0.08);
+
+  --stzh-color-black: #000000;
+  --stzh-color-black48: rgba(0, 0, 0, 0.48);
+  --stzh-color-black32: rgba(0, 0, 0, 0.32);
+  --stzh-color-black16: rgba(0, 0, 0, 0.16);
+  --stzh-color-black8: rgba(0, 0, 0, 0.08);
+
+  --stzh-color-cucumber: #80ad52;
+  --stzh-color-truegreen: #008000;
+  --stzh-color-shiraz: #c00d23;
+  --stzh-color-error: #d0021b;
+  --stzh-color-warning: #F28B00;
+  --stzh-color-active: #a4c400;
+
+  --stzh-color-grey5: #F2F2F2;
+  --stzh-color-grey13: #DEDEDE;
+  --stzh-color-grey25: #BFBFBF;
+  --stzh-color-grey40: #999999;
+  --stzh-color-grey55: #737373;
+  --stzh-color-grey61: #646464;
+  --stzh-color-grey70: #4D4D4D;
+  --stzh-color-grey87: #222222;
+
+  --stzh-color-aoz-agenda: #2f8e87;
+  --stzh-color-aoz-agenda-hover: #216664;
+  --stzh-color-cool-grey60: #5C7781;
+  --stzh-color-cool-grey60-hover: #344F59;
+  --stzh-color-cobalt-blue60: #0353DC;
+  --stzh-color-cobalt-blue60-hover: #00338D;
+  --stzh-color-shamrock-green70: #06751E;
+  --stzh-color-shamrock-green70-hover: #054D14;
+  --stzh-color-lime-green80: #3A6413;
+  --stzh-color-lime-green80-hover: #26410C;
+  --stzh-color-magenta70: #960055;
+  --stzh-color-magenta70-hover: #660033;
+  --stzh-color-ocher70: #9A5B01;
+  --stzh-color-ocher70-hover: #5A3600;
+  --stzh-color-orange: #F28B00;
+  --stzh-color-orange-hover: #915300;
+  --stzh-color-orange70: #B23A01;
+  --stzh-color-orange70-hover: #6F261F;
+  --stzh-color-red: #A51A0F;
+  --stzh-color-red-hover: #630F09;
+  --stzh-color-red60: #DC030E;
+  --stzh-color-red60-hover: #A20309;
+  --stzh-color-violet70: #512380;
+  --stzh-color-violet70-hover: #2d1348;
+  --stzh-color-winered: #89072A;
+  --stzh-color-winered-hover: #520419;
+
+  --stzh-color-primary: var(--stzh-color-zueriblue);
+  --stzh-color-primary-hover: var(--stzh-color-zueribluedark);
+
+  --stzh-color-primary48: var(--stzh-color-zueriblue48);
+  --stzh-color-primary32: var(--stzh-color-zueriblue32);
+  --stzh-color-primary16: var(--stzh-color-zueriblue16);
+  --stzh-color-primary8: var(--stzh-color-zueriblue8);
+  --stzh-color-primary4: var(--stzh-color-zueriblue4);
+
+    /* AOZ */
+    --stzh-color-tabasco: #A51A0F;
+    --stzh-color-mahogany: #630F09;
+
+    /* UVZ */
+    --stzh-color-monza: #C30024;
+    --stzh-color-venetianred: #750015;
+    --stzh-color-scienceblue: #006DC5;
+
+    /* VBZ */
+    --stzh-color-deepcerulean: #057FAC;
+    --stzh-color-regalblue: #034C67;
+    --stzh-color-coral: #E4694C;
+
+    /* PKZH */
+    --stzh-color-shakespeare: #4A96C8;
+    --stzh-color-chambray: #2C5A78;
+
+  /* Font */
+  --stzh-font-family-light: 'HelveticaNeueLTW01_41488878', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-regular: 'HelveticaNeueLTW01_55Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-bold: 'HelveticaNeueLTW01_71488914', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-heavy: 'HelveticaNeueLTW05_85Heavy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-title: var(--stzh-font-family-heavy);
+
+  --stzh-font-weight-light: normal;
+  --stzh-font-weight-regular: normal;
+  --stzh-font-weight-medium: normal;
+  --stzh-font-weight-bold: normal;
+  --stzh-font-weight-heavy: normal;
+  --stzh-font-weight-title: normal;
+
+  --stzh-font-femto-font-size: 0.625rem;
+  --stzh-font-femto-text-line-height: 1;
+
+  --stzh-font-pico-font-size: 0.75rem;
+  --stzh-font-pico-text-line-height: 1.6;
+  --stzh-font-pico-heading-letter-spacing: 0.01em;
+
+  --stzh-font-nano-font-size: 0.8125rem;
+  --stzh-font-nano-text-line-height: 1.6;
+  --stzh-font-nano-heading-line-height: 1.4;
+  --stzh-font-nano-heading-letter-spacing: 0.01em;
+
+  --stzh-font-micro-font-size: 0.875rem;
+  --stzh-font-micro-text-line-height: 1.6;
+  --stzh-font-micro-heading-line-height: 1.4;
+  --stzh-font-micro-heading-letter-spacing: 0.01em;
+
+  --stzh-font-milli-font-size: 1rem;
+  --stzh-font-milli-text-line-height: 1.6;
+  --stzh-font-milli-heading-line-height: 1.4;
+
+  --stzh-font-centi-font-size: 1.125rem;
+  --stzh-font-centi-text-line-height: 1.6;
+  --stzh-font-centi-heading-line-height: 1.4;
+
+  --stzh-font-deci-font-size: 1.25rem;
+  --stzh-font-deci-text-line-height: 1.6;
+  --stzh-font-deci-heading-line-height: 1.4;
+
+  --stzh-font-regular-font-size: 1.375rem;
+  --stzh-font-regular-text-line-height: 1.6;
+  --stzh-font-regular-heading-line-height: 1.4;
+
+  --stzh-font-deca-font-size: 1.5rem;
+  --stzh-font-deca-text-line-height: 1.2;
+  --stzh-font-deca-text-letter-spacing: -0.01em;
+
+  --stzh-font-hecto-font-size: 1.75rem;
+  --stzh-font-hecto-text-line-height: 1.2;
+  --stzh-font-hecto-text-letter-spacing: -0.01em;
+
+  --stzh-font-kilo-font-size: 2rem;
+  --stzh-font-kilo-text-line-height: 1.2;
+  --stzh-font-kilo-text-letter-spacing: -0.01em;
+
+  --stzh-font-mega-font-size: 2.5rem;
+  --stzh-font-mega-text-line-height: 1.2;
+  --stzh-font-mega-text-letter-spacing: -0.01em;
+
+  --stzh-font-giga-font-size: 2.8125rem;
+  --stzh-font-giga-text-line-height: 1.2;
+  --stzh-font-giga-text-letter-spacing: -0.01em;
+
+  --stzh-font-hero-font-size: 3.75rem;
+  --stzh-font-hero-text-line-height: 1.1;
+  --stzh-font-hero-text-letter-spacing: -0.01em;
+
+  /* Z-Index */
+  --stzh-z-index-deep: -999999;
+  --stzh-z-index-default: 1;
+  --stzh-z-index-masked: 100;
+  --stzh-z-index-mask: 200;
+  --stzh-z-index-sticky: 300;
+  --stzh-z-index-header: 400;
+  --stzh-z-index-toast: 500;
+  --stzh-z-index-popover: 600;
+  --stzh-z-index-dialog: 700;
+  --stzh-z-index-popup: 800;
+  --stzh-z-index-overlay: 900;
+
+  /* Spaces */
+  --stzh-space-xxxsmall: 0.125rem;
+  --stzh-space-xxsmall: 0.25rem;
+  --stzh-space-xsmall: 0.5rem;
+  --stzh-space-small: 0.75rem;
+  --stzh-space-medium: 1rem;
+  --stzh-space-large: 1.25rem;
+  --stzh-space-xlarge: 1.5rem;
+  --stzh-space-xxlarge: 2rem;
+  --stzh-space-xxxlarge: 2.5rem;
+  --stzh-space-xxxxlarge: 3rem;
+  --stzh-space-big: 3.5rem;
+  --stzh-space-xbig: 4rem;
+  --stzh-space-huge: 5rem;
+  --stzh-space-xhuge: 6rem;
+
+  --stzh-space-none: 0.00001rem;
+
+  --stzh-space-default: var(--stzh-space-medium);
+
+  /* Box Shadows */
+  --stzh-box-shadow-header: 0 -0.125rem 1rem rgba(0, 0, 0, 0.16);
+  --stzh-box-shadow-popover: 0 0 0.25rem rgba(0, 0, 0, 0.24);
+  --stzh-box-shadow-message: 0 0 0.5rem rgba(0, 0, 0, 0.24);
+  --stzh-box-shadow-overlay: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.32);
+
+  /* Icon sizes */
+  --stzh-icon-size-xxsmall: 0.75rem;
+  --stzh-icon-size-xsmall: 1rem;
+  --stzh-icon-size-small: 1.25rem;
+  --stzh-icon-size-medium: 1.5rem;
+  --stzh-icon-size-large: 2.25rem;
+  --stzh-icon-size-xlarge: 3rem;
+
+  --stzh-icon-size-default: var(--stzh-icon-size-small);
+
+  /* Gutter */
+
+  --stzh-grid-gutter: 1rem;
+  --stzh-grid-gutter-small: 1.25rem;
+  --stzh-grid-gutter-medium: 1.5rem;
+
+  /* Base */
+  --stzh-base-color: var(--stzh-color-grey61);
+  --stzh-base-invert-color: var(--stzh-color-white);
+
+  --stzh-base-lead-color: var(--stzh-color-grey70);
+  --stzh-base-border-color: var(--stzh-color-grey13);
+  --stzh-base-vector-effect: non-scaling-stroke;
+  --stzh-base-transition-animation-speed: 0.3s;
+
+  /* Links */
+  --stzh-link-color: var(--stzh-color-primary);
+  --stzh-link-hover-color: var(--stzh-color-primary-hover);
+  --stzh-link-icon-wrapper-height: 1em;
+
+  /* Buttons */
+  --stzh-button-border-radius: 0.1875rem;
+  --stzh-button-text-hover-background: rgba(15, 5, 160, 0.08);
+
+  /* Richttext */
+  --stzh-richttext-blockquote-color: var(--stzh-color-primary);
+  --stzh-richttext-blockquote-line-color: var(--stzh-color-primary);
+  --stzh-richttext-blockquote-footer-color: var(--stzh-color-grey55);
+
+  /* Section */
+  --stzh-section-background-color: transparent;
+  --stzh-section-highlight-background-color: var(--stzh-color-grey5);
+  --stzh-section-highlight-horizontal-padding: var(--stzh-space-medium);
+
+  /* Heading */
+  --stzh-heading-color: var(--stzh-color-primary);
+
+  /* Table */
+  --stzh-table-max-height: none;
+  --stzh-table-min-width: 43.75rem;
+  --stzh-table-cell-padding: var(--stzh-space-small) var(--stzh-space-medium);
+  --stzh-table-input-width: 11rem;
+
+  /* Menu Item */
+  --stzh-menu-item-height: 2.375rem;
+
+  /* Inputs / Buttons / Select */
+  --stzh-form-input-border-radius: 0.125rem;
+  --stzh-form-input-height: 3rem;
+  --stzh-form-input-small-height: 2.5rem;
+  --stzh-form-input-tiny-height: 2rem;
+
+  /* Popover */
+  --stzh-popover-width: 13.9375rem;
+  --stzh-popover-min-width: initial;
+  --stzh-popover-max-width: initial;
+  --stzh-popover-border-radius: 0.1875rem;
+
+  /* Tooltips */
+  --stzh-tooltip-width: auto;
+  --stzh-tooltip-min-width: initial;
+  --stzh-tooltip-max-width: 20.875rem;
+  --stzh-tooltip-padding: var(--stzh-space-small);
+  --stzh-tooltip-border-radius: 0.1875rem;
+  --stzh-tooltip-drop-shadow: drop-shadow(0 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
+
+  /* Accordion */
+  --stzh-accordion-content-padding: var(--stzh-space-medium);
+  --stzh-accordion-content-background: var(--stzh-color-grey5);
+}
+
+.stzh-theme-aoz {
+  --stzh-color-primary: var(--stzh-color-tabasco);
+  --stzh-color-primary-hover: var(--stzh-color-mahogany);
+
+  --stzh-color-primary48: rgba(165, 26, 15, 0.48);
+  --stzh-color-primary32: rgba(165, 26, 15, 0.32);
+  --stzh-color-primary16: rgba(165, 26, 15, 0.16);
+  --stzh-color-primary8: rgba(165, 26, 15, 0.08);
+  --stzh-color-primary4: rgba(165, 26, 15, 0.04);
+
+  --stzh-button-text-hover-background: rgba(165, 26, 15, 0.08);
+}
+
+.stzh-theme-vbz {
+  --stzh-color-primary: var(--stzh-color-deepcerulean);
+  --stzh-color-primary-hover: var(--stzh-color-regalblue);
+
+  --stzh-color-primary48: rgba(5, 127, 172, 0.48);
+  --stzh-color-primary32: rgba(5, 127, 172, 0.32);
+  --stzh-color-primary16: rgba(5, 127, 172, 0.16);
+  --stzh-color-primary8: rgba(5, 127, 172, 0.08);
+  --stzh-color-primary4: rgba(5, 127, 172, 0.04);
+
+  --stzh-font-family-heavy: var(--stzh-font-family-bold);
+  --stzh-font-family-title: var(--stzh-font-family-light);
+
+  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);
+}
+
+.stzh-theme-uvz {
+  --stzh-color-primary: var(--stzh-color-monza);
+  --stzh-color-primary-hover: var(--stzh-color-venetianred);
+
+  --stzh-color-primary48: rgba(195, 0, 36, 0.48);
+  --stzh-color-primary32: rgba(195, 0, 36, 0.32);
+  --stzh-color-primary16: rgba(195, 0, 36, 0.16);
+  --stzh-color-primary8: rgba(195, 0, 36, 0.08);
+  --stzh-color-primary4: rgba(195, 0, 36, 0.04);
+
+  --stzh-button-text-hover-background: rgba(195, 0, 36, 0.08);
+  --stzh-link-color: var(--stzh-color-scienceblue);
+  --stzh-heading-color: var(--stzh-color-black);
+}
+
+.stzh-theme-pkzh {
+  --stzh-pkzh-font-family: Verdana, 'Geneva', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+  --stzh-color-primary: var(--stzh-color-shakespeare);
+  --stzh-color-primary-hover: var(--stzh-color-chambray);
+
+  --stzh-color-primary48: rgba(74, 150, 200, 0.48);
+  --stzh-color-primary32: rgba(74, 150, 200, 0.32);
+  --stzh-color-primary16: rgba(74, 150, 200, 0.16);
+  --stzh-color-primary8: rgba(74, 150, 200, 0.08);
+  --stzh-color-primary4: rgba(74, 150, 200, 0.04);
+
+  --stzh-font-family-light: var(--stzh-pkzh-font-family);
+  --stzh-font-family-regular: var(--stzh-pkzh-font-family);
+  --stzh-font-family-medium: var(--stzh-pkzh-font-family);
+  --stzh-font-family-bold: var(--stzh-pkzh-font-family);
+  --stzh-font-family-heavy: var(--stzh-pkzh-font-family);
+
+  --stzh-font-weight-light: 300;
+  --stzh-font-weight-regular: normal;
+  --stzh-font-weight-medium: 500;
+  --stzh-font-weight-bold: 700;
+  --stzh-font-weight-heavy: 800;
+
+  --stzh-button-text-hover-background: rgba(74, 150, 200, 0.08);
+}
+
+.stzh-theme-ms-aoz-agenda {
+  --stzh-color-primary: var(--stzh-color-aoz-agenda);
+  --stzh-color-primary-hover: var(--stzh-color-aoz-agenda-hover);
+
+  --stzh-color-primary48: rgba(47, 142, 135, 0.48);
+  --stzh-color-primary32: rgba(47, 142, 135, 0.32);
+  --stzh-color-primary16: rgba(47, 142, 135, 0.16);
+  --stzh-color-primary8: rgba(47, 142, 135, 0.08);
+  --stzh-color-primary4: rgba(47, 142, 135, 0.04);
+}
+
+.stzh-theme-ms-cool-grey60 {
+  --stzh-color-primary: var(--stzh-color-cool-grey60);
+  --stzh-color-primary-hover: var(--stzh-color-cool-grey60-hover);
+
+  --stzh-color-primary48: rgba(92, 119, 129, 0.48);
+  --stzh-color-primary32: rgba(92, 119, 129, 0.32);
+  --stzh-color-primary16: rgba(92, 119, 129, 0.16);
+  --stzh-color-primary8: rgba(92, 119, 129, 0.08);
+  --stzh-color-primary4: rgba(92, 119, 129, 0.04);
+}
+
+.stzh-theme-ms-cobalt-blue60 {
+  --stzh-color-primary: var(--stzh-color-cobalt-blue60);
+  --stzh-color-primary-hover: var(--stzh-color-cobalt-blue60-hover);
+
+  --stzh-color-primary48: rgba(3, 83, 220, 0.48);
+  --stzh-color-primary32: rgba(3, 83, 220, 0.32);
+  --stzh-color-primary16: rgba(3, 83, 220, 0.16);
+  --stzh-color-primary8: rgba(3, 83, 220, 0.08);
+  --stzh-color-primary4: rgba(3, 83, 220, 0.04);
+}
+
+.stzh-theme-ms-shamrock-green70 {
+  --stzh-color-primary: var(--stzh-color-shamrock-green70);
+  --stzh-color-primary-hover: var(--stzh-color-shamrock-green70-hover);
+
+  --stzh-color-primary48: rgba(6, 117, 30, 0.48);
+  --stzh-color-primary32: rgba(6, 117, 30, 0.32);
+  --stzh-color-primary16: rgba(6, 117, 30, 0.16);
+  --stzh-color-primary8: rgba(6, 117, 30, 0.08);
+  --stzh-color-primary4: rgba(6, 117, 30, 0.04);
+}
+
+.stzh-theme-ms-lime-green80 {
+  --stzh-color-primary: var(--stzh-color-lime-green80);
+  --stzh-color-primary-hover: var(--stzh-color-lime-green80-hover);
+
+  --stzh-color-primary48: rgba(58, 100, 19, 0.48);
+  --stzh-color-primary32: rgba(58, 100, 19, 0.32);
+  --stzh-color-primary16: rgba(58, 100, 19, 0.16);
+  --stzh-color-primary8: rgba(58, 100, 19, 0.08);
+  --stzh-color-primary4: rgba(58, 100, 19, 0.04);
+}
+
+.stzh-theme-ms-magenta70 {
+  --stzh-color-primary: var(--stzh-color-magenta70);
+  --stzh-color-primary-hover: var(--stzh-color-magenta70-hover);
+
+  --stzh-color-primary48: rgba(150, 0, 85, 0.48);
+  --stzh-color-primary32: rgba(150, 0, 85, 0.32);
+  --stzh-color-primary16: rgba(150, 0, 85, 0.16);
+  --stzh-color-primary8: rgba(150, 0, 85, 0.08);
+  --stzh-color-primary4: rgba(150, 0, 85, 0.04);
+}
+
+.stzh-theme-ms-ocher70 {
+  --stzh-color-primary: var(--stzh-color-ocher70);
+  --stzh-color-primary-hover: var(--stzh-color-ocher70-hover);
+
+  --stzh-color-primary48: rgba(154, 91, 1, 0.48);
+  --stzh-color-primary32: rgba(154, 91, 1, 0.32);
+  --stzh-color-primary16: rgba(154, 91, 1, 0.16);
+  --stzh-color-primary8: rgba(154, 91, 1, 0.08);
+  --stzh-color-primary4: rgba(154, 91, 1, 0.04);
+}
+
+.stzh-theme-ms-orange {
+  --stzh-color-primary: var(--stzh-color-orange);
+  --stzh-color-primary-hover: var(--stzh-color-orange-hover);
+
+  --stzh-color-primary48: rgba(242, 139, 0, 0.48);
+  --stzh-color-primary32: rgba(242, 139, 0, 0.32);
+  --stzh-color-primary16: rgba(242, 139, 0, 0.16);
+  --stzh-color-primary8: rgba(242, 139, 0, 0.08);
+  --stzh-color-primary4: rgba(242, 139, 0, 0.04);
+}
+
+.stzh-theme-ms-orange70 {
+  --stzh-color-primary: var(--stzh-color-orange70);
+  --stzh-color-primary-hover: var(--stzh-color-orange70-hover);
+
+  --stzh-color-primary48: rgba(178, 58, 1, 0.48);
+  --stzh-color-primary32: rgba(178, 58, 1, 0.32);
+  --stzh-color-primary16: rgba(178, 58, 1, 0.16);
+  --stzh-color-primary8: rgba(178, 58, 1, 0.08);
+  --stzh-color-primary4: rgba(178, 58, 1, 0.04);
+}
+
+.stzh-theme-ms-red {
+  --stzh-color-primary: var(--stzh-color-red);
+  --stzh-color-primary-hover: var(--stzh-color-red-hover);
+
+  --stzh-color-primary48: rgba(165, 26, 15, 0.48);
+  --stzh-color-primary32: rgba(165, 26, 15, 0.32);
+  --stzh-color-primary16: rgba(165, 26, 15, 0.16);
+  --stzh-color-primary8: rgba(165, 26, 15, 0.08);
+  --stzh-color-primary4: rgba(165, 26, 15, 0.04);
+}
+
+.stzh-theme-ms-red60 {
+  --stzh-color-primary: var(--stzh-color-red60);
+  --stzh-color-primary-hover: var(--stzh-color-red60-hover);
+
+  --stzh-color-primary48: rgba(220, 3, 14, 0.48);
+  --stzh-color-primary32: rgba(220, 3, 14, 0.32);
+  --stzh-color-primary16: rgba(220, 3, 14, 0.16);
+  --stzh-color-primary8: rgba(220, 3, 14, 0.08);
+  --stzh-color-primary4: rgba(220, 3, 14, 0.04);
+}
+
+.stzh-theme-ms-violet70 {
+  --stzh-color-primary: var(--stzh-color-violet70);
+  --stzh-color-primary-hover: var(--stzh-color-violet70-hover);
+
+  --stzh-color-primary48: rgba(81, 35, 128, 0.48);
+  --stzh-color-primary32: rgba(81, 35, 128, 0.32);
+  --stzh-color-primary16: rgba(81, 35, 128, 0.16);
+  --stzh-color-primary8: rgba(81, 35, 128, 0.08);
+  --stzh-color-primary4: rgba(81, 35, 128, 0.04);
+}
+
+.stzh-theme-ms-winered {
+  --stzh-color-primary: var(--stzh-color-winered);
+  --stzh-color-primary-hover: var(--stzh-color-winered-hover);
+
+  --stzh-color-primary48: rgba(137, 7, 42, 0.48);
+  --stzh-color-primary32: rgba(137, 7, 42, 0.32);
+  --stzh-color-primary16: rgba(137, 7, 42, 0.16);
+  --stzh-color-primary8: rgba(137, 7, 42, 0.08);
+  --stzh-color-primary4: rgba(137, 7, 42, 0.04);
+}
+
+.stzh-theme-ma {
+  background-color: var(--stzh-color-grey5);
+
+  /* overwrite p1 and p2 font curves to be always the same size */
+  --stzh-font-curve-p1-medium-font-size: var(--stzh-font-milli-font-size);
+  --stzh-font-curve-p1-medium-text-line-height: var(--stzh-font-milli-text-line-height);
+  --stzh-font-curve-p1-medium-heading-line-height: var(--stzh-font-milli-heading-line-height);
+  --stzh-font-curve-p2-medium-font-size: var(--stzh-font-micro-font-size);
+  --stzh-font-curve-p2-medium-text-line-height: var(--stzh-font-micro-text-line-height);
+  --stzh-font-curve-p2-medium-heading-line-height: var(--stzh-font-micro-heading-line-height);
+  --stzh-font-curve-p2-medium-heading-letter-spacing: var(--stzh-font-micro-heading-letter-spacing);
+}
 
 :host {
   font-family: var(--stzh-font-family-regular);