:root {
   --dark-primary-text: rgba(0, 0, 0, 0.87);
   --light-primary-text: #fff;
   --cx-black: #000;
   --cx-white: #fff;
   /* Farbpaletten */
   --cx-warning-red-50: #fee8e7;
   --cx-warning-red-100: #ffcabb;
   --cx-warning-red-200: #ffa790;
   --cx-warning-red-300: #ff8363;
   --cx-warning-red-400: #ff6340;
   --cx-warning-red-500: #ff411e;
   --cx-warning-red-600: #ff3a19;
   --cx-warning-red-700: #fb3213;
   --cx-warning-red-800: #ed280d;
   --cx-warning-red-900: #d50e00;
   --cx-warning-red-a100: #ff6a6a;
   --cx-warning-red-50-contrast: var(--dark-primary-text);
   --cx-warning-red-100-contrast: var(--dark-primary-text);
   --cx-warning-red-200-contrast: var(--dark-primary-text);
   --cx-warning-red-300-contrast: var(--dark-primary-text);
   --cx-warning-red-400-contrast: var(--dark-primary-text);
   --cx-warning-red-500-contrast: var(--dark-primary-text);
   --cx-warning-red-600-contrast: var(--dark-primary-text);
   --cx-warning-red-700-contrast: var(--dark-primary-text);
   --cx-warning-red-800-contrast: var(--dark-primary-text);
   --cx-warning-red-900-contrast: var(--light-primary-text);
   --cx-warning-red-a100-contrast: var(--dark-primary-text);
   /* Farbpalette erstellt mit https://coolors.co/gradient-palette
   Es wurde drauf geachtet, dass es eine Farbe gibt, die auf weiß als Textfarbe ausreichend Kontrast hat (d. h. 4.5:1), dies ist Wert 900.
   Zudem wurde für Icons ein kräftiges Orange gewählt (Wert 500).
   Hier muss der Kontrast zur hellsten Farbe (Wert 50) ausreichend für Icons sein (d. h. 3:1).
   Basierend auf diesen Werten wurde die Farbpalette erstellt.

   Hinweis: Orange und Gelb als Textfarben sind für Barrierefreiheit generell ein Problem, siehe Wiki-Artikel "Farben & Kontraste":
   https://cx-tfs.connext.de/tfs/DefaultCollection/Vivendi/_wiki/wikis/Vivendi.wiki/1847/Farben-Kontraste
   */
   --cx-warning-orange-50: #fef4e1;
   --cx-warning-orange-100: #f8d9b4;
   --cx-warning-orange-200: #f2be87;
   --cx-warning-orange-300: #eda35a;
   --cx-warning-orange-400: #e7882d;
   --cx-warning-orange-500: #e16d00;
   --cx-warning-orange-600: #d86900;
   --cx-warning-orange-700: #cf6400;
   --cx-warning-orange-800: #c66000;
   --cx-warning-orange-900: #bd5b00;
   --cx-warning-orange-50-contrast: var(--dark-primary-text);
   --cx-warning-orange-100-contrast: var(--dark-primary-text);
   --cx-warning-orange-200-contrast: var(--dark-primary-text);
   --cx-warning-orange-300-contrast: var(--dark-primary-text);
   --cx-warning-orange-400-contrast: var(--dark-primary-text);
   --cx-warning-orange-500-contrast: var(--dark-primary-text);
   --cx-warning-orange-600-contrast: var(--dark-primary-text);
   --cx-warning-orange-700-contrast: var(--dark-primary-text);
   --cx-warning-orange-800-contrast: var(--dark-primary-text);
   --cx-warning-orange-900-contrast: var(--dark-primary-text);
   --cx-grey-50: #fafafa;
   --cx-grey-100: #f5f5f5;
   --cx-grey-200: #eeeeee;
   --cx-grey-300: #e0e0e0;
   --cx-grey-400: #bdbdbd;
   --cx-grey-500: #9e9e9e;
   --cx-grey-600: #757575;
   --cx-grey-700: #616161;
   --cx-grey-800: #424242;
   --cx-grey-900: #212121;
   --cx-grey-a100: #ffffff;
   --cx-grey-a200: #eeeeee;
   --cx-grey-a400: #bdbdbd;
   --cx-grey-a700: #616161;
   --cx-grey-50-contrast: var(--dark-primary-text);
   --cx-grey-100-contrast: var(--dark-primary-text);
   --cx-grey-200-contrast: var(--dark-primary-text);
   --cx-grey-300-contrast: var(--dark-primary-text);
   --cx-grey-400-contrast: var(--dark-primary-text);
   --cx-grey-500-contrast: var(--dark-primary-text);
   --cx-grey-600-contrast: var(--light-primary-text);
   --cx-grey-700-contrast: var(--light-primary-text);
   --cx-grey-800-contrast: var(--light-primary-text);
   --cx-grey-900-contrast: var(--light-primary-text);
   --cx-grey-a100-contrast: var(--dark-primary-text);
   --cx-grey-a200-contrast: var(--dark-primary-text);
   --cx-grey-a400-contrast: var(--dark-primary-text);
   --cx-grey-a700-contrast: var(--light-primary-text);
   --cx-blue-50: #e7eef3;
   --cx-blue-100: #c3d4e1;
   --cx-blue-200: #9bb8ce;
   --cx-blue-300: #729bba;
   --cx-blue-400: #5485ab;
   --cx-blue-500: #36709c;
   --cx-blue-600: #306894;
   --cx-blue-700: #295d8a;
   --cx-blue-800: #225380;
   --cx-blue-900: #16416e;
   --cx-blue-a100: #a7cfff;
   --cx-blue-a200: #74b3ff;
   --cx-blue-a400: #4197ff;
   --cx-blue-a700: #2789ff;
   --cx-blue-50-contrast: var(--dark-primary-text);
   --cx-blue-100-contrast: var(--dark-primary-text);
   --cx-blue-200-contrast: var(--dark-primary-text);
   --cx-blue-300-contrast: var(--dark-primary-text);
   --cx-blue-400-contrast: var(--light-primary-text);
   --cx-blue-500-contrast: var(--light-primary-text);
   --cx-blue-600-contrast: var(--light-primary-text);
   --cx-blue-700-contrast: var(--light-primary-text);
   --cx-blue-800-contrast: var(--light-primary-text);
   --cx-blue-900-contrast: var(--light-primary-text);
   --cx-blue-a100-contrast: var(--dark-primary-text);
   --cx-blue-a200-contrast: var(--dark-primary-text);
   --cx-blue-a400-contrast: var(--dark-primary-text);
   --cx-blue-a700-contrast: var(--light-primary-text);
   --cx-red-50: #f3e0e0;
   --cx-red-100: #e0b3b3;
   --cx-red-200: #cc8080;
   --cx-red-300: #b84d4d;
   --cx-red-400: #a82626;
   --cx-red-500: #990000;
   --cx-red-600: #910000;
   --cx-red-700: #860000;
   --cx-red-800: #7c0000;
   --cx-red-900: #6b0000;
   --cx-red-a100: #ff9a9a;
   --cx-red-a200: #ff6767;
   --cx-red-50-contrast: var(--dark-primary-text);
   --cx-red-100-contrast: var(--dark-primary-text);
   --cx-red-200-contrast: var(--dark-primary-text);
   --cx-red-300-contrast: var(--light-primary-text);
   --cx-red-400-contrast: var(--light-primary-text);
   --cx-red-500-contrast: var(--light-primary-text);
   --cx-red-600-contrast: var(--light-primary-text);
   --cx-red-700-contrast: var(--light-primary-text);
   --cx-red-800-contrast: var(--light-primary-text);
   --cx-red-900-contrast: var(--light-primary-text);
   --cx-red-a100-contrast: var(--dark-primary-text);
   --cx-red-a200-contrast: var(--dark-primary-text);
   /* Farbpalette erstellt mit http://mcg.mbitson.com/#!?mcgpalette
   Die zwei Alternativfarben wurde manuell angepasst, sodass die beiden Farbwerte als cx-success-color für Icons und Text
   auf hellem bzw. dunklem Hintergrund genutzt werden können.
   */
   --cx-green-50: #e0efec;
   --cx-green-100: #b3d7d0;
   --cx-green-200: #80bdb1;
   --cx-green-300: #4da291;
   --cx-green-400: #268e7a;
   --cx-green-500: #007a62;
   --cx-green-600: #00725a;
   --cx-green-700: #006750;
   --cx-green-800: #005d46;
   --cx-green-900: #004a34;
   --cx-green-a100: #2bb14a;
   --cx-green-a200: #327a43;
   --cx-green-50-contrast: var(--dark-primary-text);
   --cx-green-100-contrast: var(--dark-primary-text);
   --cx-green-200-contrast: var(--dark-primary-text);
   --cx-green-300-contrast: var(--dark-primary-text);
   --cx-green-400-contrast: var(--light-primary-text);
   --cx-green-500-contrast: var(--light-primary-text);
   --cx-green-600-contrast: var(--light-primary-text);
   --cx-green-700-contrast: var(--light-primary-text);
   --cx-green-800-contrast: var(--light-primary-text);
   --cx-green-900-contrast: var(--light-primary-text);
   --cx-green-a100-contrast: var(--dark-primary-text);
   --cx-green-a200-contrast: var(--dark-primary-text);
   --cx-yellow-50: #f9f5e1;
   --cx-yellow-100: #f4ecc6;
   --cx-yellow-200: #efe3ab;
   --cx-yellow-300: #e4d174;
   --cx-yellow-400: #dabf3d;
   --cx-yellow-500: #cfad06;
   --cx-yellow-600: #c09d05;
   --cx-yellow-700: #b08c04;
   --cx-yellow-800: #a17c03;
   --cx-yellow-900: #916b01;
   --cx-yellow-a100: #fff4db;
   --cx-yellow-a200: #ffe5a8;
   --cx-yellow-a400: #ffd575;
   --cx-yellow-a700: #ffcd5c;
   --cx-yellow-50-contrast: var(--dark-primary-text);
   --cx-yellow-100-contrast: var(--dark-primary-text);
   --cx-yellow-200-contrast: var(--dark-primary-text);
   --cx-yellow-300-contrast: var(--dark-primary-text);
   --cx-yellow-400-contrast: var(--dark-primary-text);
   --cx-yellow-500-contrast: var(--dark-primary-text);
   --cx-yellow-600-contrast: var(--dark-primary-text);
   --cx-yellow-700-contrast: var(--dark-primary-text);
   --cx-yellow-800-contrast: var(--dark-primary-text);
   --cx-yellow-900-contrast: var(--dark-primary-text);
   --cx-yellow-a100-contrast: var(--dark-primary-text);
   --cx-yellow-a200-contrast: var(--dark-primary-text);
   --cx-yellow-a400-contrast: var(--dark-primary-text);
   --cx-yellow-a700-contrast: var(--dark-primary-text);
   --cx-orange-50: #fdf4e8;
   --cx-orange-100: #f6d3b3;
   --cx-orange-200: #f0b680;
   --cx-orange-300: #e9984d;
   --cx-orange-400: #e58226;
   --cx-orange-500: #e06c00;
   --cx-orange-600: #dc6400;
   --cx-orange-700: #d85900;
   --cx-orange-800: #d34f00;
   --cx-orange-900: #cb3d00;
   --cx-orange-a100: #fff6f3;
   --cx-orange-a200: #ffcfc0;
   --cx-orange-a400: #ffa78d;
   --cx-orange-a700: #ff9474;
   --cx-orange-50-contrast: var(--dark-primary-text);
   --cx-orange-100-contrast: var(--dark-primary-text);
   --cx-orange-200-contrast: var(--dark-primary-text);
   --cx-orange-300-contrast: var(--dark-primary-text);
   --cx-orange-400-contrast: var(--dark-primary-text);
   --cx-orange-500-contrast: var(--dark-primary-text);
   --cx-orange-600-contrast: var(--dark-primary-text);
   --cx-orange-700-contrast: var(--dark-primary-text);
   --cx-orange-800-contrast: var(--dark-primary-text);
   --cx-orange-900-contrast: var(--light-primary-text);
   --cx-orange-a100-contrast: var(--dark-primary-text);
   --cx-orange-a200-contrast: var(--dark-primary-text);
   --cx-orange-a400-contrast: var(--dark-primary-text);
   --cx-orange-a700-contrast: var(--dark-primary-text);
   --cx-pink-50: #f7ecf0;
   --cx-pink-100: #ebcfda;
   --cx-pink-200: #deafc2;
   --cx-pink-300: #d18ea9;
   --cx-pink-400: #c77696;
   --cx-pink-500: #bd5e84;
   --cx-pink-600: #b7567c;
   --cx-pink-700: #ae4c71;
   --cx-pink-800: #a64267;
   --cx-pink-900: #983154;
   --cx-pink-a100: #ffe0ea;
   --cx-pink-a200: #ffadc8;
   --cx-pink-a400: #ff7aa5;
   --cx-pink-a700: #ff6194;
   --cx-pink-50-contrast: var(--dark-primary-text);
   --cx-pink-100-contrast: var(--dark-primary-text);
   --cx-pink-200-contrast: var(--dark-primary-text);
   --cx-pink-300-contrast: var(--dark-primary-text);
   --cx-pink-400-contrast: var(--dark-primary-text);
   --cx-pink-500-contrast: var(--light-primary-text);
   --cx-pink-600-contrast: var(--light-primary-text);
   --cx-pink-700-contrast: var(--light-primary-text);
   --cx-pink-800-contrast: var(--light-primary-text);
   --cx-pink-900-contrast: var(--light-primary-text);
   --cx-pink-a100-contrast: var(--dark-primary-text);
   --cx-pink-a200-contrast: var(--dark-primary-text);
   --cx-pink-a400-contrast: var(--dark-primary-text);
   --cx-pink-a700-contrast: var(--dark-primary-text);

   /*Farben der Vivendi App Icons*/
   --cx-pd-app-green: #2a8d36;
   --cx-pep-app-yellow: #f9eb21;
}