@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {

  /************

  Farben

  ************/

  --cpd_farbe_marke_mint_100: #d9ffee;
  --cpd_farbe_marke_mint_200: #b1fad9;
  --cpd_farbe_marke_mint_300: #8cf5c5;
  --cpd_farbe_marke_mint_400: #66f2b3;
  --cpd_farbe_marke_mint_500: #40ed9f;
  --cpd_farbe_marke_mint_600: #30bf7f;
  --cpd_farbe_marke_mint_700: #1f8f5d;
  --cpd_farbe_marke_mint_800: #10613c;
  --cpd_farbe_marke_mint_900: #00331c;

  --cpd_farbe_marke_blau_100: #e8e6ff;
  --cpd_farbe_marke_blau_200: #c1baf7;
  --cpd_farbe_marke_blau_300: #c1baf7;
  --cpd_farbe_marke_blau_400: #6f5fe8;
  --cpd_farbe_marke_blau_500: #4631e0;
  --cpd_farbe_marke_blau_600: #3726b5;
  --cpd_farbe_marke_blau_700: #281c8a;
  --cpd_farbe_marke_blau_800: #19105e;
  --cpd_farbe_marke_blau_900: #19105e;

  --cpd_farbe_marke_rot_100: #ffe0e0;
  --cpd_farbe_marke_rot_200: #f7b2b2;
  --cpd_farbe_marke_rot_300: #f08181;
  --cpd_farbe_marke_rot_400: #e75151;
  --cpd_farbe_marke_rot_500: #de2121;
  --cpd_farbe_marke_rot_600: #b51919;
  --cpd_farbe_marke_rot_700: #8a1313;
  --cpd_farbe_marke_rot_800: #5e0c0c;
  --cpd_farbe_marke_rot_900: #330505;

  
  --cpd_farbe_zusatz_grau_100: #e7e6f2;
  --cpd_farbe_zusatz_grau_200: #c1c0cc;
  --cpd_farbe_zusatz_grau_300: #9b9aa6;
  --cpd_farbe_zusatz_grau_400: #757480;
  --cpd_farbe_zusatz_grau_500: #504f59;
  --cpd_farbe_zusatz_grau_600: #41404a;
  --cpd_farbe_zusatz_grau_700: #302f38;
  --cpd_farbe_zusatz_grau_800: #212029;
  --cpd_farbe_zusatz_grau_900: #12121a;

  
  --cpd_farbe_info_error_100: #e6c3c3;
  --cpd_farbe_info_error_200: #eda1a1;
  --cpd_farbe_info_error_300: #f27e7e;
  --cpd_farbe_info_error_400: #f75c5c;
  --cpd_farbe_info_error_500: #ff3b3b;
  --cpd_farbe_info_error_600: #d42f2f;
  --cpd_farbe_info_error_700: #a62121;
  --cpd_farbe_info_error_800: #7a1515;
  --cpd_farbe_info_error_900: #4d0808;
  
  --cpd_farbe_info_warning_100: #e6d8c3;
  --cpd_farbe_info_warning_200: #ebcea4;
  --cpd_farbe_info_warning_300: #f0c686;
  --cpd_farbe_info_warning_400: #f5bd69;
  --cpd_farbe_info_warning_500: #fab44b;
  --cpd_farbe_info_warning_600: #cf943c;
  --cpd_farbe_info_warning_700: #a3732a;
  --cpd_farbe_info_warning_800: #785219;
  --cpd_farbe_info_warning_900: #4d3108;

  --cpd_farbe_info_information_100: #cfd7e6;
  --cpd_farbe_info_information_200: #9dbded;
  --cpd_farbe_info_information_300: #689ff2;
  --cpd_farbe_info_information_400: #3482f7;
  --cpd_farbe_info_information_500: #0065fc;
  --cpd_farbe_info_information_600: #0253cc;
  --cpd_farbe_info_information_700: #03419e;
  --cpd_farbe_info_information_800: #063070;
  --cpd_farbe_info_information_900: #061d40;

  --cpd_farbe_info_success_100: #cae6cc;
  --cpd_farbe_info_success_200: #a9deac;
  --cpd_farbe_info_success_300: #85d48c;
  --cpd_farbe_info_success_400: #61c969;
  --cpd_farbe_info_success_500: #3dbf48;
  --cpd_farbe_info_success_600: #2fa339;
  --cpd_farbe_info_success_700: #23872b;
  --cpd_farbe_info_success_800: #166b1c;
  --cpd_farbe_info_success_900: #084d0c;



  /* 
  Textfarben 
  */
  --cpd_farbe_text_hell: #F8F8FF;
  --cpd_farbe_text_dunkel: #0A0A0A;


  /* Background */
  --cpd_farbe_items_backg_hell: #FFFDFA;
  --cpd_farbe_items_backg_dunkel: #F0F0F0;

  /* 
  Hintergrundfarben 
  */
  --cpd_farbe_section_light_backg: #FFFDFA;
  --cpd_farbe_section_dark_backg: #FFFDFA;
  /*--cpd_farbe_section_dark_backg: #F5F5F5;*/

  --cpd_farbe_header_backg: #FAFAFA;
  --cpd_farbe_footer_backg: #FAFAFA;



  /* Social Media */
  --cpd_farbe_socialmedia_insta: #FF0069;
  --cpd_farbe_socialmedia_x: #1DA1F2;
  --cpd_farbe_socialmedia_facebook: #1877F2;
  --cpd_farbe_socialmedia_youtube: #FF0000;
  --cpd_farbe_socialmedia_spotify: #1DB954;


  /* Abstände */

  --cpd_abstand_header_size: 72px;
  --cpd_abstand_sec_pad_topbot: 56px;

  --cpd_abstand_seitenabstand_huf: clamp(40px, 4vw, 80px);
  --cpd_abstand_seitenabstand: clamp(40px, 8vw, 160px);

}