@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -82,6 +82,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -245,7 +248,8 @@ body {
 .stzh-dialog-open,
 .stzh-dialog-open.sb-show-main.sb-main-fullscreen, /* only for storybook */
 .stzh-overlay-open,
-.stzh-overlay-open.sb-show-main.sb-main-fullscreen  /* only for storybook */ {
+.stzh-overlay-open.sb-show-main.sb-main-fullscreen /* only for storybook */
+{
   touch-action: none;
   -webkit-overflow-scrolling: none;
   overflow: hidden;
@@ -398,7 +402,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-firgreen30: rgba(var(--stzh-color-firgreen30-rgb) / 1);
   --stzh-color-firgreen40-rgb: 101 205 140;
   --stzh-color-firgreen40: rgba(var(--stzh-color-firgreen40-rgb) / 1);
-  --stzh-color-firgreen50-rgb: 52 177 11;
+  --stzh-color-firgreen50-rgb: 52 177 111;
   --stzh-color-firgreen50: rgba(var(--stzh-color-firgreen50-rgb) / 1);
   --stzh-color-firgreen60-rgb: 0 151 85;
   --stzh-color-firgreen60: rgba(var(--stzh-color-firgreen60-rgb) / 1);
@@ -705,84 +709,84 @@ the .has-focus class is used by the focus target */
   --stzh-color-grey100-rgb: 42 42 42;
   --stzh-color-grey100: rgba(var(--stzh-color-grey100-rgb) / 1);
 
-    /* AOZ */
-    --stzh-color-tabasco-rgb: 165 26 15;
-    --stzh-color-tabasco: rgba(var(--stzh-color-tabasco-rgb) / 1);
-    --stzh-color-mahogany-rgb: 99 15 9;
-    --stzh-color-mahogany: rgba(var(--stzh-color-mahogany-rgb) / 1);
-
-    /* UVZ */
-    --stzh-color-monza-rgb: 195 0 36;
-    --stzh-color-monza: rgba(var(--stzh-color-monza-rgb) / 1);
-    --stzh-color-venetianred-rgb: 117 0 21;
-    --stzh-color-venetianred: rgba(var(--stzh-color-venetianred-rgb) / 1);
-    --stzh-color-scienceblue-rgb: 0 109 197;
-    --stzh-color-scienceblue: rgba(var(--stzh-color-scienceblue-rgb) / 1);
-
-    /* VBZ */
-    --stzh-color-deepcerulean-rgb: 5 127 172;
-    --stzh-color-deepcerulean: rgba(var(--stzh-color-deepcerulean-rgb) / 1);
-    --stzh-color-regalblue-rgb: 3 76 103;
-    --stzh-color-regalblue: rgba(var(--stzh-color-regalblue-rgb) / 1);
-    --stzh-color-coral-rgb: 228 105 76;
-    --stzh-color-coral: rgba(var(--stzh-color-coral-rgb) / 1);
-
-    /* PKZH */
-    --stzh-color-shakespeare-rgb: 74 150 200;
-    --stzh-color-shakespeare: rgba(var(--stzh-color-shakespeare-rgb) / 1);
-    --stzh-color-chambray-rgb: 44 90 120;
-    --stzh-color-chambray: rgba(var(--stzh-color-chambray-rgb) / 1);
-
-    /* Microsite Colors */
-
-    --stzh-color-ms-aoz-agenda-rgb: 47 142 135;
-    --stzh-color-ms-aoz-agenda: rgba(var(--stzh-color-ms-aoz-agenda-rgb) / 1);
-    --stzh-color-ms-aoz-agenda-hover-rgb: 33 102 100;
-    --stzh-color-ms-aoz-agenda-hover: rgba(var(--stzh-color-ms-aoz-agenda-hover-rgb) / 1);
-
-    --stzh-color-ms-coolgrey60-rgb: 92 119 129;
-    --stzh-color-ms-coolgrey60: rgba(var(--stzh-color-ms-coolgrey60-rgb) / 1);
-    --stzh-color-ms-coolgrey60-hover-rgb: 52 79 89;
-    --stzh-color-ms-coolgrey60-hover: rgba(var(--stzh-color-ms-coolgrey60-hover-rgb) / 1);
-
-    --stzh-color-ms-orange-rgb: 242 139 0;
-    --stzh-color-ms-orange: rgba(var(--stzh-color-ms-orange-rgb) / 1);
-    --stzh-color-ms-orange-hover-rgb: 145 83 0;
-    --stzh-color-ms-orange-hover: rgba(var(--stzh-color-ms-orange-hover-rgb) / 1);
-
-    --stzh-color-ms-red-rgb: 165 26 15;
-    --stzh-color-ms-red: rgba(var(--stzh-color-ms-red-rgb) / 1);
-    --stzh-color-ms-red-hover-rgb: 99 15 9;
-    --stzh-color-ms-red-hover: rgba(var(--stzh-color--ms-red-hover-rgb) / 1);
-
-    --stzh-color-ms-winered-rgb: 137 7 42;
-    --stzh-color-ms-winered: rgba(var(--stzh-color-ms-winered-rgb) / 1);
-    --stzh-color-ms-winered-hover-rgb: 82 4 25;
-    --stzh-color-ms-winered-hover: rgba(var(--stzh-color-ms-winered-hover-rgb) / 1);
-
-    --stzh-color-cobaltblue60-hover-rgb: 0 51 141;
-    --stzh-color-cobaltblue60-hover: rgba(var(--stzh-color-cobaltblue60-hover-rgb) / 1);
-
-    --stzh-color-shamrock70-hover-rgb: 5 77 20;
-    --stzh-color-shamrock70-hover: rgba(var(--stzh-color-shamrock70-hover-rgb) / 1);
-
-    --stzh-color-limegreen80-hover-rgb: 38 65 12;
-    --stzh-color-limegreen80-hover: rgba(var(--stzh-color-limegreen80-hover-rgb) / 1);
-
-    --stzh-color-magenta70-hover-rgb: 102 0 51;
-    --stzh-color-magenta70-hover: rgba(var(--stzh-color-magenta70-hover-rgb) / 1);
-
-    --stzh-color-ocher70-hover-rgb: 90 54 0;
-    --stzh-color-ocher70-hover: rgba(var(--stzh-color-ocher70-hover-rgb) / 1);
-
-    --stzh-color-orange70-hover-rgb: 111 38 31;
-    --stzh-color-orange70-hover: rgba(var(--stzh-color-orange70-hover-rgb) / 1);
-
-    --stzh-color-red60-hover-rgb: 162 3 9;
-    --stzh-color-red60-hover: rgba(var(--stzh-color-red60-hover-rgb) / 1);
-
-    --stzh-color-violet70-hover-rgb: 45 19 72;
-    --stzh-color-violet70-hover: rgba(var(--stzh-color-violet70-hover-rgb) / 1);
+  /* AOZ */
+  --stzh-color-tabasco-rgb: 165 26 15;
+  --stzh-color-tabasco: rgba(var(--stzh-color-tabasco-rgb) / 1);
+  --stzh-color-mahogany-rgb: 99 15 9;
+  --stzh-color-mahogany: rgba(var(--stzh-color-mahogany-rgb) / 1);
+
+  /* UVZ */
+  --stzh-color-monza-rgb: 195 0 36;
+  --stzh-color-monza: rgba(var(--stzh-color-monza-rgb) / 1);
+  --stzh-color-venetianred-rgb: 117 0 21;
+  --stzh-color-venetianred: rgba(var(--stzh-color-venetianred-rgb) / 1);
+  --stzh-color-scienceblue-rgb: 0 109 197;
+  --stzh-color-scienceblue: rgba(var(--stzh-color-scienceblue-rgb) / 1);
+
+  /* VBZ */
+  --stzh-color-deepcerulean-rgb: 5 127 172;
+  --stzh-color-deepcerulean: rgba(var(--stzh-color-deepcerulean-rgb) / 1);
+  --stzh-color-regalblue-rgb: 3 76 103;
+  --stzh-color-regalblue: rgba(var(--stzh-color-regalblue-rgb) / 1);
+  --stzh-color-coral-rgb: 228 105 76;
+  --stzh-color-coral: rgba(var(--stzh-color-coral-rgb) / 1);
+
+  /* PKZH */
+  --stzh-color-shakespeare-rgb: 74 150 200;
+  --stzh-color-shakespeare: rgba(var(--stzh-color-shakespeare-rgb) / 1);
+  --stzh-color-chambray-rgb: 44 90 120;
+  --stzh-color-chambray: rgba(var(--stzh-color-chambray-rgb) / 1);
+
+  /* Microsite Colors */
+
+  --stzh-color-ms-aoz-agenda-rgb: 47 142 135;
+  --stzh-color-ms-aoz-agenda: rgba(var(--stzh-color-ms-aoz-agenda-rgb) / 1);
+  --stzh-color-ms-aoz-agenda-hover-rgb: 33 102 100;
+  --stzh-color-ms-aoz-agenda-hover: rgba(var(--stzh-color-ms-aoz-agenda-hover-rgb) / 1);
+
+  --stzh-color-ms-coolgrey60-rgb: 92 119 129;
+  --stzh-color-ms-coolgrey60: rgba(var(--stzh-color-ms-coolgrey60-rgb) / 1);
+  --stzh-color-ms-coolgrey60-hover-rgb: 52 79 89;
+  --stzh-color-ms-coolgrey60-hover: rgba(var(--stzh-color-ms-coolgrey60-hover-rgb) / 1);
+
+  --stzh-color-ms-orange-rgb: 242 139 0;
+  --stzh-color-ms-orange: rgba(var(--stzh-color-ms-orange-rgb) / 1);
+  --stzh-color-ms-orange-hover-rgb: 145 83 0;
+  --stzh-color-ms-orange-hover: rgba(var(--stzh-color-ms-orange-hover-rgb) / 1);
+
+  --stzh-color-ms-red-rgb: 165 26 15;
+  --stzh-color-ms-red: rgba(var(--stzh-color-ms-red-rgb) / 1);
+  --stzh-color-ms-red-hover-rgb: 99 15 9;
+  --stzh-color-ms-red-hover: rgba(var(--stzh-color-ms-red-hover-rgb) / 1);
+
+  --stzh-color-ms-winered-rgb: 137 7 42;
+  --stzh-color-ms-winered: rgba(var(--stzh-color-ms-winered-rgb) / 1);
+  --stzh-color-ms-winered-hover-rgb: 82 4 25;
+  --stzh-color-ms-winered-hover: rgba(var(--stzh-color-ms-winered-hover-rgb) / 1);
+
+  --stzh-color-cobaltblue60-hover-rgb: 0 51 141;
+  --stzh-color-cobaltblue60-hover: rgba(var(--stzh-color-cobaltblue60-hover-rgb) / 1);
+
+  --stzh-color-shamrock70-hover-rgb: 5 77 20;
+  --stzh-color-shamrock70-hover: rgba(var(--stzh-color-shamrock70-hover-rgb) / 1);
+
+  --stzh-color-limegreen80-hover-rgb: 38 65 12;
+  --stzh-color-limegreen80-hover: rgba(var(--stzh-color-limegreen80-hover-rgb) / 1);
+
+  --stzh-color-magenta70-hover-rgb: 102 0 51;
+  --stzh-color-magenta70-hover: rgba(var(--stzh-color-magenta70-hover-rgb) / 1);
+
+  --stzh-color-ocher70-hover-rgb: 90 54 0;
+  --stzh-color-ocher70-hover: rgba(var(--stzh-color-ocher70-hover-rgb) / 1);
+
+  --stzh-color-orange70-hover-rgb: 111 38 31;
+  --stzh-color-orange70-hover: rgba(var(--stzh-color-orange70-hover-rgb) / 1);
+
+  --stzh-color-red60-hover-rgb: 162 3 9;
+  --stzh-color-red60-hover: rgba(var(--stzh-color-red60-hover-rgb) / 1);
+
+  --stzh-color-violet70-hover-rgb: 45 19 72;
+  --stzh-color-violet70-hover: rgba(var(--stzh-color-violet70-hover-rgb) / 1);
 
   --stzh-color-white-rgb: 255 255 255;
   --stzh-color-white: rgba(var(--stzh-color-white-rgb) / 1);
@@ -808,138 +812,138 @@ the .has-focus class is used by the focus target */
   --stzh-color-black80op: rgba(var(--stzh-color-black-rgb) / 0.8);
   --stzh-color-black90op: rgba(var(--stzh-color-black-rgb) / 0.9);
 
-    --stzh-color-primary10-rgb: var(--stzh-color-midnightblue10-rgb);
-    --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
-    --stzh-color-primary20-rgb: var(--stzh-color-midnightblue20-rgb);
-    --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
-    --stzh-color-primary30-rgb: var(--stzh-color-midnightblue30-rgb);
-    --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
-    --stzh-color-primary40-rgb: var(--stzh-color-midnightblue40-rgb);
-    --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
-    --stzh-color-primary50-rgb: var(--stzh-color-midnightblue50-rgb);
-    --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
-    --stzh-color-primary60-rgb: var(--stzh-color-midnightblue60-rgb);
-    --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
-    --stzh-color-primary70-rgb: var(--stzh-color-midnightblue70-rgb);
-    --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
-    --stzh-color-primary80-rgb: var(--stzh-color-midnightblue80-rgb);
-    --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
-    --stzh-color-primary90-rgb: var(--stzh-color-midnightblue90-rgb);
-    --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
-    --stzh-color-primary100-rgb: var(--stzh-color-midnightblue100-rgb);
-    --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
-
-    --stzh-color-secondary10-rgb: var(--stzh-color-cobaltblue10-rgb);
-    --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
-    --stzh-color-secondary20-rgb: var(--stzh-color-cobaltblue20-rgb);
-    --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
-    --stzh-color-secondary30-rgb: var(--stzh-color-cobaltblue30-rgb);
-    --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
-    --stzh-color-secondary40-rgb: var(--stzh-color-cobaltblue40-rgb);
-    --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
-    --stzh-color-secondary50-rgb: var(--stzh-color-cobaltblue50-rgb);
-    --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
-    --stzh-color-secondary60-rgb: var(--stzh-color-cobaltblue60-rgb);
-    --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
-    --stzh-color-secondary70-rgb: var(--stzh-color-cobaltblue70-rgb);
-    --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
-    --stzh-color-secondary80-rgb: var(--stzh-color-cobaltblue80-rgb);
-    --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
-    --stzh-color-secondary90-rgb: var(--stzh-color-cobaltblue90-rgb);
-    --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
-    --stzh-color-secondary100-rgb: var(--stzh-color-cobaltblue100-rgb);
-    --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
-
-    --stzh-color-primary-rgb: var(--stzh-color-primary70-rgb);
-    --stzh-color-primary: rgba(var(--stzh-color-primary-rgb) / 1);
-    --stzh-color-primary-hover-rgb: var(--stzh-color-primary90-rgb);
-    --stzh-color-primary-hover: rgba(var(--stzh-color-primary-hover-rgb) / 1);
-
-    /* Signal colors */
-
-    --stzh-color-success10-rgb: var(--stzh-color-shamrock10-rgb);
-    --stzh-color-success10: rgba(var(--stzh-color-success10-rgb) / 1);
-    --stzh-color-success20-rgb: var(--stzh-color-shamrock20-rgb);
-    --stzh-color-success20: rgba(var(--stzh-color-success20-rgb) / 1);
-    --stzh-color-success30-rgb: var(--stzh-color-shamrock30-rgb);
-    --stzh-color-success30: rgba(var(--stzh-color-success30-rgb) / 1);
-    --stzh-color-success40-rgb: var(--stzh-color-shamrock40-rgb);
-    --stzh-color-success40: rgba(var(--stzh-color-success40-rgb) / 1);
-    --stzh-color-success50-rgb: var(--stzh-color-shamrock50-rgb);
-    --stzh-color-success50: rgba(var(--stzh-color-success50-rgb) / 1);
-    --stzh-color-success60-rgb: var(--stzh-color-shamrock60-rgb);
-    --stzh-color-success60: rgba(var(--stzh-color-success60-rgb) / 1);
-    --stzh-color-success70-rgb: var(--stzh-color-shamrock70-rgb);
-    --stzh-color-success70: rgba(var(--stzh-color-success70-rgb) / 1);
-    --stzh-color-success80-rgb: var(--stzh-color-shamrock80-rgb);
-    --stzh-color-success80: rgba(var(--stzh-color-success80-rgb) / 1);
-    --stzh-color-success90-rgb: var(--stzh-color-shamrock90-rgb);
-    --stzh-color-success90: rgba(var(--stzh-color-success90-rgb) / 1);
-    --stzh-color-success100-rgb: var(--stzh-color-shamrock100-rgb);
-    --stzh-color-success100: rgba(var(--stzh-color-success100-rgb) / 1);
-
-    --stzh-color-error10-rgb: var(--stzh-color-coral10-rgb);
-    --stzh-color-error10: rgba(var(--stzh-color-error10-rgb) / 1);
-    --stzh-color-error20-rgb: var(--stzh-color-coral20-rgb);
-    --stzh-color-error20: rgba(var(--stzh-color-error20-rgb) / 1);
-    --stzh-color-error30-rgb: var(--stzh-color-coral30-rgb);
-    --stzh-color-error30: rgba(var(--stzh-color-error30-rgb) / 1);
-    --stzh-color-error40-rgb: var(--stzh-color-coral40-rgb);
-    --stzh-color-error40: rgba(var(--stzh-color-error40-rgb) / 1);
-    --stzh-color-error50-rgb: var(--stzh-color-coral50-rgb);
-    --stzh-color-error50: rgba(var(--stzh-color-error50-rgb) / 1);
-    --stzh-color-error60-rgb: var(--stzh-color-coral60-rgb);
-    --stzh-color-error60: rgba(var(--stzh-color-error60-rgb) / 1);
-    --stzh-color-error70-rgb: var(--stzh-color-coral70-rgb);
-    --stzh-color-error70: rgba(var(--stzh-color-error70-rgb) / 1);
-    --stzh-color-error80-rgb: var(--stzh-color-coral80-rgb);
-    --stzh-color-error80: rgba(var(--stzh-color-error80-rgb) / 1);
-    --stzh-color-error90-rgb: var(--stzh-color-coral90-rgb);
-    --stzh-color-error90: rgba(var(--stzh-color-error90-rgb) / 1);
-    --stzh-color-error100-rgb: var(--stzh-color-coral100-rgb);
-    --stzh-color-error100: rgba(var(--stzh-color-error100-rgb) / 1);
-
-    --stzh-color-warning10-rgb: var(--stzh-color-sunnyyellow10-rgb);
-    --stzh-color-warning10: rgba(var(--stzh-color-warning10-rgb) / 1);
-    --stzh-color-warning20-rgb: var(--stzh-color-sunnyyellow20-rgb);
-    --stzh-color-warning20: rgba(var(--stzh-color-warning20-rgb) / 1);
-    --stzh-color-warning30-rgb: var(--stzh-color-sunnyyellow30-rgb);
-    --stzh-color-warning30: rgba(var(--stzh-color-warning30-rgb) / 1);
-    --stzh-color-warning40-rgb: var(--stzh-color-sunnyyellow40-rgb);
-    --stzh-color-warning40: rgba(var(--stzh-color-warning40-rgb) / 1);
-    --stzh-color-warning50-rgb: var(--stzh-color-sunnyyellow50-rgb);
-    --stzh-color-warning50: rgba(var(--stzh-color-warning50-rgb) / 1);
-    --stzh-color-warning60-rgb: var(--stzh-color-sunnyyellow60-rgb);
-    --stzh-color-warning60: rgba(var(--stzh-color-warning60-rgb) / 1);
-    --stzh-color-warning70-rgb: var(--stzh-color-sunnyyellow70-rgb);
-    --stzh-color-warning70: rgba(var(--stzh-color-warning70-rgb) / 1);
-    --stzh-color-warning80-rgb: var(--stzh-color-sunnyyellow80-rgb);
-    --stzh-color-warning80: rgba(var(--stzh-color-warning80-rgb) / 1);
-    --stzh-color-warning90-rgb: var(--stzh-color-sunnyyellow90-rgb);
-    --stzh-color-warning90: rgba(var(--stzh-color-warning90-rgb) / 1);
-    --stzh-color-warning100-rgb: var(--stzh-color-sunnyyellow100-rgb);
-    --stzh-color-warning100: rgba(var(--stzh-color-warning100-rgb) / 1);
-
-    --stzh-color-info10-rgb: var(--stzh-color-coolgrey10-rgb);
-    --stzh-color-info10: rgba(var(--stzh-color-info10-rgb) / 1);
-    --stzh-color-info20-rgb: var(--stzh-color-coolgrey20-rgb);
-    --stzh-color-info20: rgba(var(--stzh-color-info20-rgb) / 1);
-    --stzh-color-info30-rgb: var(--stzh-color-coolgrey30-rgb);
-    --stzh-color-info30: rgba(var(--stzh-color-info30-rgb) / 1);
-    --stzh-color-info40-rgb: var(--stzh-color-coolgrey40-rgb);
-    --stzh-color-info40: rgba(var(--stzh-color-info40-rgb) / 1);
-    --stzh-color-info50-rgb: var(--stzh-color-coolgrey50-rgb);
-    --stzh-color-info50: rgba(var(--stzh-color-info50-rgb) / 1);
-    --stzh-color-info60-rgb: var(--stzh-color-coolgrey60-rgb);
-    --stzh-color-info60: rgba(var(--stzh-color-info60-rgb) / 1);
-    --stzh-color-info70-rgb: var(--stzh-color-coolgrey70-rgb);
-    --stzh-color-info70: rgba(var(--stzh-color-info70-rgb) / 1);
-    --stzh-color-info80-rgb: var(--stzh-color-coolgrey80-rgb);
-    --stzh-color-info80: rgba(var(--stzh-color-info80-rgb) / 1);
-    --stzh-color-info90-rgb: var(--stzh-color-coolgrey90-rgb);
-    --stzh-color-info90: rgba(var(--stzh-color-info90-rgb) / 1);
-    --stzh-color-info100-rgb: var(--stzh-color-coolgrey100-rgb);
-    --stzh-color-info100: rgba(var(--stzh-color-info100-rgb) / 1);
+  --stzh-color-primary10-rgb: var(--stzh-color-midnightblue10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-midnightblue20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-midnightblue30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-midnightblue40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-midnightblue50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-midnightblue60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-midnightblue70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-midnightblue80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-midnightblue90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-midnightblue100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+
+  --stzh-color-secondary10-rgb: var(--stzh-color-cobaltblue10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-cobaltblue20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-cobaltblue30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-cobaltblue40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-cobaltblue50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-cobaltblue60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-cobaltblue70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-cobaltblue80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-cobaltblue90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-cobaltblue100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  --stzh-color-primary-rgb: var(--stzh-color-primary70-rgb);
+  --stzh-color-primary: rgba(var(--stzh-color-primary-rgb) / 1);
+  --stzh-color-primary-hover-rgb: var(--stzh-color-primary90-rgb);
+  --stzh-color-primary-hover: rgba(var(--stzh-color-primary-hover-rgb) / 1);
+
+  /* Signal colors */
+
+  --stzh-color-success10-rgb: var(--stzh-color-shamrock10-rgb);
+  --stzh-color-success10: rgba(var(--stzh-color-success10-rgb) / 1);
+  --stzh-color-success20-rgb: var(--stzh-color-shamrock20-rgb);
+  --stzh-color-success20: rgba(var(--stzh-color-success20-rgb) / 1);
+  --stzh-color-success30-rgb: var(--stzh-color-shamrock30-rgb);
+  --stzh-color-success30: rgba(var(--stzh-color-success30-rgb) / 1);
+  --stzh-color-success40-rgb: var(--stzh-color-shamrock40-rgb);
+  --stzh-color-success40: rgba(var(--stzh-color-success40-rgb) / 1);
+  --stzh-color-success50-rgb: var(--stzh-color-shamrock50-rgb);
+  --stzh-color-success50: rgba(var(--stzh-color-success50-rgb) / 1);
+  --stzh-color-success60-rgb: var(--stzh-color-shamrock60-rgb);
+  --stzh-color-success60: rgba(var(--stzh-color-success60-rgb) / 1);
+  --stzh-color-success70-rgb: var(--stzh-color-shamrock70-rgb);
+  --stzh-color-success70: rgba(var(--stzh-color-success70-rgb) / 1);
+  --stzh-color-success80-rgb: var(--stzh-color-shamrock80-rgb);
+  --stzh-color-success80: rgba(var(--stzh-color-success80-rgb) / 1);
+  --stzh-color-success90-rgb: var(--stzh-color-shamrock90-rgb);
+  --stzh-color-success90: rgba(var(--stzh-color-success90-rgb) / 1);
+  --stzh-color-success100-rgb: var(--stzh-color-shamrock100-rgb);
+  --stzh-color-success100: rgba(var(--stzh-color-success100-rgb) / 1);
+
+  --stzh-color-error10-rgb: var(--stzh-color-coral10-rgb);
+  --stzh-color-error10: rgba(var(--stzh-color-error10-rgb) / 1);
+  --stzh-color-error20-rgb: var(--stzh-color-coral20-rgb);
+  --stzh-color-error20: rgba(var(--stzh-color-error20-rgb) / 1);
+  --stzh-color-error30-rgb: var(--stzh-color-coral30-rgb);
+  --stzh-color-error30: rgba(var(--stzh-color-error30-rgb) / 1);
+  --stzh-color-error40-rgb: var(--stzh-color-coral40-rgb);
+  --stzh-color-error40: rgba(var(--stzh-color-error40-rgb) / 1);
+  --stzh-color-error50-rgb: var(--stzh-color-coral50-rgb);
+  --stzh-color-error50: rgba(var(--stzh-color-error50-rgb) / 1);
+  --stzh-color-error60-rgb: var(--stzh-color-coral60-rgb);
+  --stzh-color-error60: rgba(var(--stzh-color-error60-rgb) / 1);
+  --stzh-color-error70-rgb: var(--stzh-color-coral70-rgb);
+  --stzh-color-error70: rgba(var(--stzh-color-error70-rgb) / 1);
+  --stzh-color-error80-rgb: var(--stzh-color-coral80-rgb);
+  --stzh-color-error80: rgba(var(--stzh-color-error80-rgb) / 1);
+  --stzh-color-error90-rgb: var(--stzh-color-coral90-rgb);
+  --stzh-color-error90: rgba(var(--stzh-color-error90-rgb) / 1);
+  --stzh-color-error100-rgb: var(--stzh-color-coral100-rgb);
+  --stzh-color-error100: rgba(var(--stzh-color-error100-rgb) / 1);
+
+  --stzh-color-warning10-rgb: var(--stzh-color-sunnyyellow10-rgb);
+  --stzh-color-warning10: rgba(var(--stzh-color-warning10-rgb) / 1);
+  --stzh-color-warning20-rgb: var(--stzh-color-sunnyyellow20-rgb);
+  --stzh-color-warning20: rgba(var(--stzh-color-warning20-rgb) / 1);
+  --stzh-color-warning30-rgb: var(--stzh-color-sunnyyellow30-rgb);
+  --stzh-color-warning30: rgba(var(--stzh-color-warning30-rgb) / 1);
+  --stzh-color-warning40-rgb: var(--stzh-color-sunnyyellow40-rgb);
+  --stzh-color-warning40: rgba(var(--stzh-color-warning40-rgb) / 1);
+  --stzh-color-warning50-rgb: var(--stzh-color-sunnyyellow50-rgb);
+  --stzh-color-warning50: rgba(var(--stzh-color-warning50-rgb) / 1);
+  --stzh-color-warning60-rgb: var(--stzh-color-sunnyyellow60-rgb);
+  --stzh-color-warning60: rgba(var(--stzh-color-warning60-rgb) / 1);
+  --stzh-color-warning70-rgb: var(--stzh-color-sunnyyellow70-rgb);
+  --stzh-color-warning70: rgba(var(--stzh-color-warning70-rgb) / 1);
+  --stzh-color-warning80-rgb: var(--stzh-color-sunnyyellow80-rgb);
+  --stzh-color-warning80: rgba(var(--stzh-color-warning80-rgb) / 1);
+  --stzh-color-warning90-rgb: var(--stzh-color-sunnyyellow90-rgb);
+  --stzh-color-warning90: rgba(var(--stzh-color-warning90-rgb) / 1);
+  --stzh-color-warning100-rgb: var(--stzh-color-sunnyyellow100-rgb);
+  --stzh-color-warning100: rgba(var(--stzh-color-warning100-rgb) / 1);
+
+  --stzh-color-info10-rgb: var(--stzh-color-coolgrey10-rgb);
+  --stzh-color-info10: rgba(var(--stzh-color-info10-rgb) / 1);
+  --stzh-color-info20-rgb: var(--stzh-color-coolgrey20-rgb);
+  --stzh-color-info20: rgba(var(--stzh-color-info20-rgb) / 1);
+  --stzh-color-info30-rgb: var(--stzh-color-coolgrey30-rgb);
+  --stzh-color-info30: rgba(var(--stzh-color-info30-rgb) / 1);
+  --stzh-color-info40-rgb: var(--stzh-color-coolgrey40-rgb);
+  --stzh-color-info40: rgba(var(--stzh-color-info40-rgb) / 1);
+  --stzh-color-info50-rgb: var(--stzh-color-coolgrey50-rgb);
+  --stzh-color-info50: rgba(var(--stzh-color-info50-rgb) / 1);
+  --stzh-color-info60-rgb: var(--stzh-color-coolgrey60-rgb);
+  --stzh-color-info60: rgba(var(--stzh-color-info60-rgb) / 1);
+  --stzh-color-info70-rgb: var(--stzh-color-coolgrey70-rgb);
+  --stzh-color-info70: rgba(var(--stzh-color-info70-rgb) / 1);
+  --stzh-color-info80-rgb: var(--stzh-color-coolgrey80-rgb);
+  --stzh-color-info80: rgba(var(--stzh-color-info80-rgb) / 1);
+  --stzh-color-info90-rgb: var(--stzh-color-coolgrey90-rgb);
+  --stzh-color-info90: rgba(var(--stzh-color-info90-rgb) / 1);
+  --stzh-color-info100-rgb: var(--stzh-color-coolgrey100-rgb);
+  --stzh-color-info100: rgba(var(--stzh-color-info100-rgb) / 1);
 
   /* Old colors (TODO: cleanup if not needed) */
 
@@ -1059,6 +1063,18 @@ the .has-focus class is used by the focus target */
   --stzh-font-hero-text-line-height: 1.2;
   --stzh-font-hero-text-letter-spacing: -0.02em;
 
+  --stzh-font-peta-font-size: 4rem;
+  --stzh-font-peta-text-line-height: 1.2;
+  --stzh-font-peta-text-letter-spacing: -0.02em;
+
+  --stzh-font-exa-font-size: 5rem;
+  --stzh-font-exa-text-line-height: 1.2;
+  --stzh-font-exa-text-letter-spacing: -0.02em;
+
+  --stzh-font-zetta-font-size: 5.625rem;
+  --stzh-font-zetta-text-line-height: 1.2;
+  --stzh-font-zetta-text-letter-spacing: -0.02em;
+
   /* Z-Index */
   --stzh-z-index-deep: -999999;
   --stzh-z-index-default: 1;
@@ -1224,6 +1240,10 @@ the .has-focus class is used by the focus target */
   /* Pagetitle */
   --stzh-pagetitle-background-color: var(--stzh-color-secondary30);
 
+  /* Pagetitle */
+  --stzh-topnews-background-color: var(--stzh-color-secondary30);
+  --stzh-mostsearched-background-color: var(--stzh-color-secondary40);
+
   /* Calendar */
   --stzh-calendar-width: 20rem;
 
@@ -1411,6 +1431,361 @@ the .has-focus class is used by the focus target */
   background-color: var(--stzh-color-grey10);
 }
 
+/**
+ * Publizistische Inhalte (PI)
+ */
+
+.stzh-theme-pi-lemongrass,
+.stzh-theme-pi-firgreen,
+.stzh-theme-pi-petrol,
+.stzh-theme-pi-orange {
+  /**
+   * Body background
+   */
+
+  body {
+    background-color: var(--stzh-color-coolgrey10);
+  }
+
+  /**
+   * Textandimage
+   */
+  --stzh-textandimage-grid-template-areas: "text text text text" "image image image image";
+
+  @media screen and (min-width: 600px) {
+    --stzh-textandimage-grid-template-areas: "text text text text" "image image image image";
+  }
+
+  @media screen and (min-width: 900px) {
+    --stzh-textandimage-grid-template-areas: "text text text text text image image image";
+    --stzh-textandimage-grid-template-areas-image-left: "text text text image image image image image";
+  }
+}
+
+.stzh-theme-pi-lemongrass {
+  --stzh-color-primary10-rgb: var(--stzh-color-lemongrass10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-lemongrass20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-lemongrass30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-lemongrass40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-lemongrass50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-lemongrass60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-lemongrass70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-lemongrass80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-lemongrass90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-lemongrass100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+
+  --stzh-color-secondary10-rgb: var(--stzh-color-lemongrass10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-lemongrass20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-lemongrass30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-lemongrass40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-lemongrass50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-lemongrass60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-lemongrass70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-lemongrass80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-lemongrass90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-lemongrass100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  --stzh-color-primary-rgb: var(--stzh-color-primary50-rgb);
+  --stzh-color-primary: rgba(var(--stzh-color-primary-rgb) / 1);
+  --stzh-color-primary-hover-rgb: var(--stzh-color-primary70-rgb);
+  --stzh-color-primary-hover: rgba(var(--stzh-color-primary-hover-rgb) / 1);
+
+  /**
+   * Heading/Richtext
+   */
+  --stzh-heading-color: var(--stzh-color-primary80);
+
+  /**
+   * Header/Footer overrides.
+   */
+  --stzh-header-logobar-background-color: var(--stzh-color-primary50);
+  --stzh-footer-background-color: var(--stzh-color-primary90);
+
+  /**
+   * Card Navigation overrides.
+   */
+  --stzh-pi-content-navigation-arrow-background-color: var(--stzh-color-primary40);
+
+  /**
+   * Quote overrides
+   */
+  --stzh-pi-quote-color: var(--stzh-color-primary70);
+
+  /**
+   * Teaser overrides
+   */
+  --stzh-pi-teaser-image-background-color: var(--stzh-color-primary40);
+
+  /**
+   * Card list
+   */
+  --stzh-cardlist-background-color: var(--stzh-color-primary20);
+  --stzh-cardlist-description-color: var(--stzh-color-black);
+}
+
+.stzh-theme-pi-firgreen {
+  --stzh-color-primary10-rgb: var(--stzh-color-firgreen10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-firgreen20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-firgreen30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-firgreen40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-firgreen50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-firgreen60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-firgreen70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-firgreen80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-firgreen90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-firgreen100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+
+  --stzh-color-secondary10-rgb: var(--stzh-color-firgreen10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-firgreen20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-firgreen30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-firgreen40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-firgreen50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-firgreen60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-firgreen70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-firgreen80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-firgreen90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-firgreen100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  --stzh-color-primary-rgb: var(--stzh-color-primary50-rgb);
+  --stzh-color-primary: rgba(var(--stzh-color-primary-rgb) / 1);
+  --stzh-color-primary-hover-rgb: var(--stzh-color-primary70-rgb);
+  --stzh-color-primary-hover: rgba(var(--stzh-color-primary-hover-rgb) / 1);
+
+  /**
+   * Heading/Richtext
+   */
+  --stzh-heading-color: var(--stzh-color-primary60);
+
+  /**
+   * Header/Footer overrides.
+   */
+  --stzh-header-logobar-background-color: var(--stzh-color-primary50);
+  --stzh-footer-background-color: var(--stzh-color-primary90);
+
+  /**
+   * Card Navigation overrides.
+   */
+  --stzh-pi-content-navigation-arrow-background-color: var(--stzh-color-primary30);
+
+  /**
+   * Quote overrides
+   */
+  --stzh-pi-quote-color: var(--stzh-color-primary60);
+
+  /**
+   * Teaser overrides
+   */
+  --stzh-pi-teaser-image-background-color: var(--stzh-color-primary30);
+
+  /**
+   * Card list
+   */
+  --stzh-cardlist-background-color: var(--stzh-color-primary20);
+  --stzh-cardlist-description-color: var(--stzh-color-black);
+}
+
+.stzh-theme-pi-petrol {
+  --stzh-color-primary10-rgb: var(--stzh-color-petrol10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-petrol20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-petrol30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-petrol40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-petrol50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-petrol60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-petrol70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-petrol80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-petrol90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-petrol100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+
+  --stzh-color-secondary10-rgb: var(--stzh-color-petrol10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-petrol20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-petrol30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-petrol40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-petrol50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-petrol60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-petrol70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-petrol80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-petrol90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-petrol100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  --stzh-color-primary-rgb: var(--stzh-color-primary50-rgb);
+  --stzh-color-primary: rgba(var(--stzh-color-primary-rgb) / 1);
+  --stzh-color-primary-hover-rgb: var(--stzh-color-primary70-rgb);
+  --stzh-color-primary-hover: rgba(var(--stzh-color-primary-hover-rgb) / 1);
+
+  /**
+   * Heading/Richtext
+   */
+  --stzh-heading-color: var(--stzh-color-primary60);
+
+  /**
+   * Header/Footer overrides.
+   */
+  --stzh-header-logobar-background-color: var(--stzh-color-primary50);
+  --stzh-footer-background-color: var(--stzh-color-primary80);
+
+  /**
+   * Card Navigation overrides.
+   */
+  --stzh-pi-content-navigation-arrow-background-color: var(--stzh-color-primary30);
+
+  /**
+   * Quote overrides
+   */
+  --stzh-pi-quote-color: var(--stzh-color-primary60);
+
+  /**
+   * Teaser overrides
+   */
+  --stzh-pi-teaser-image-background-color: var(--stzh-color-primary30);
+
+  /**
+   * Card list
+   */
+  --stzh-cardlist-background-color: var(--stzh-color-primary10);
+  --stzh-cardlist-description-color: var(--stzh-color-black);
+}
+
+.stzh-theme-pi-orange {
+  --stzh-color-primary10-rgb: var(--stzh-color-orange10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-orange20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-orange30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-orange40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-orange50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-orange60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-orange70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-orange80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-orange90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-orange100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+
+  --stzh-color-secondary10-rgb: var(--stzh-color-orange10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-orange20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-orange30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-orange40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-orange50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-orange60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-orange70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-orange80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-orange90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-orange100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+
+  --stzh-color-primary-rgb: var(--stzh-color-primary50-rgb);
+  --stzh-color-primary: rgba(var(--stzh-color-primary-rgb) / 1);
+  --stzh-color-primary-hover-rgb: var(--stzh-color-primary70-rgb);
+  --stzh-color-primary-hover: rgba(var(--stzh-color-primary-hover-rgb) / 1);
+
+  /**
+   * Heading/Richtext
+   */
+  --stzh-heading-color: var(--stzh-color-primary60);
+
+  /**
+   * Header/Footer overrides.
+   */
+  --stzh-header-logobar-background-color: var(--stzh-color-primary50);
+  --stzh-footer-background-color: var(--stzh-color-primary80);
+
+  /**
+   * Card Navigation overrides.
+   */
+  --stzh-pi-content-navigation-arrow-background-color: var(--stzh-color-primary40);
+
+  /**
+   * Quote overrides
+   */
+  --stzh-pi-quote-color: var(--stzh-color-primary50);
+
+  /**
+   * Teaser overrides
+   */
+  --stzh-pi-teaser-image-background-color: var(--stzh-color-primary30);
+
+  /**
+   * Card list
+   */
+  --stzh-cardlist-background-color: var(--stzh-color-primary20);
+  --stzh-cardlist-description-color: var(--stzh-color-black);
+}
+
 :host {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);