/**
 * variables
 */
 :root {

  /* #region G L O B A L */

  --page-size-desktop: 1024px;
  --content-grip-gap-desktop: 20px;
  --content-grip-row-gap-desktop: 30px;
  --content-responsive-padding: 4.2rem;
  --font-size-convert: 10px;
  --content-background: #000;
  --primary-font: 'Pangea', sans-serif;

  /* C A L C U L A T E - I M A G E */
  --calc-image-padding-gap: calc(var(--content-responsive-padding) + var(--content-grip-gap-desktop) / 2);
  --calc-image-negative-padding: calc(var(--content-responsive-padding) * -1);
  --calc-image-negative-gap: calc(var(--content-grip-gap-desktop) / 2 * -1);

  --small-padding: 3rem;
  --medium-padding: 4.2rem;
  
  /* #endregion */

  /* #region C O L O R S */

  --primary-color-01: #000000;
  --primary-color-02: #FFFFFF;

  --secondary-color-01: #877dcd;
  --secondary-color-02: #ff641e;
  --secondary-color-03: #cddcbe;
  --secondary-color-04: #23466e;

  --gradient-background-color-01: linear-gradient(to bottom, #000, #ffffff00);
  --gradient-background-color-02: linear-gradient(to top, #000, #fff);
  /* #endregion */

  /* #region  T Y P O G R A P H Y */

  --font-color: var(--primary-color-02);
  --primary-font-size: 10px;

  --h1-size: clamp(3.2rem, calc(2.66rem + 1.51vw), 4.2rem);   ;
  --h1-line-height: clamp(5.6rem, calc(6.02rem + -1.15vw), 4.4rem);
  --h1-letter-spacing: -0.02rem;
  --h1-color: var(--primary-color-02);

  --h2-size: clamp(3rem, calc(4.28rem + -0.77vw), 2.6rem);
  --h2-line-height: clamp(4.8rem, calc(5.08rem + -0.77vw), 4rem);
  --h2-letter-spacing: -0.01rem;
  --h2-color: var(--primary-color-02);

  --h3-size: clamp(3.2rem, calc(3.34rem + -0.38vw), 2.8rem);
  --h3-line-height: clamp(4rem, calc(4.14rem + -0.38vw), 3.6rem);
  --h3-letter-spacing: 0.01rem;
  --h3-color: var(--primary-color-02);

  --h4-size: 2.4rem;
  --h4-line-height: 3.2rem;
  --h4-letter-spacing: -0.01rem;
  --h4-color: var(--primary-color-02);

  --h5-size: 2rem;
  --h5-line-height: 2.8rem;
  --h5-letter-spacing: -0.01rem;
  --h5-color: var(--primary-color-02);

  --h6-size: 1.6rem;
  --h6-line-height: 2.4rem;
  --h6-letter-spacing: -0.01rem;
  --h6-color: var(--primary-color-02);

  --p-size: 2rem;
  --p-color: var(--primary-color-02);
  --p-line-height: 2.5rem;
  --p-letter-spacing: 1px;
  --p-letter-spacing-md: 0.42px;
  --p-font-weight: normal;
  --p-font-stretch: normal;
  --p-size-md: 1.8rem;
  --p-size-sm: 1.6rem;
  --p-size-xs: 1.4rem;
  --a-size: 2rem;
  --a-line-height: 2.5rem;
  --a-letter-spacing: 1px;
  --a-color: var(--primary-color-02);
  --a-hover: var(--secondary-color-02);
  --a-font-weight: normal;
  --a-font-stretch: normal;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* #endregion */

  /* #region B U T T O N S */

  --button-primary-background-color: var(--primary-color-02);
  --button-primary-color: var(--primary-color-01);
  --button-primary-font-size: 1.2rem;
  --button-primary-weight: 600;
  --button-primary-line-height: 2rem;
  --button-primary-letter-spacing: 1px;
  --button-primary-border-radius: 50px;
  --button-primary-border: 0;
  --button-primary-padding: 10px 30px;
  --button-primary-background-hover: var(--secondary-color-02);
  --button-primary-color-hover: var(--primary-color-02);

  --button-secondary-background-color: transparent;
  --button-secondary-color: var(--primary-color-02);
  --button-secondary-font-size: 1.2rem;
  --button-secondary-line-height: 1.9rem;
  --button-secondary-border: solid 2px var(--primary-color-02);

  --button-third-background-color: var(--secondary-color-02);
  --button-third-color: var(--primary-color-02);
  --button-third-background-hover: var(--primary-color-02);
  --button-third-color-hover: var(--secondary-color-02);

  /* #endregion */

  /* #region Q U O T E */

  --quote-size: 2.5rem;
  --quote-line-height: 1.4;
  --quote-letter-spacing: 1px;

  /* #endregion */

  /* #region H E A D E R */

  --header-height: 93px;
  --header-logo-width: 125px;
  --header-background-color: var(--gradient-background-color-01);
  --header-nav-color: var(--primary-color-02);
  --header-nav-color-hover: var(--secondary-color-02);
  --header-nav-font-size: 1.5rem;
  --header-nav-line-height: 2rem;
  --header-nav-letter-spacing: 1px;
  --header-nav-link-gap: 55px;

  /* #endregion */

  /* #region T O P L I N E */

  --topline-size: 1.2rem;
  --topline-letter-spacing: 2px;
  --topline-margin: 0.8rem 0 1.5rem 0;

  /* #endregion */

  /* #region M O D U L E _ T E A S E R - C A R D S */

  --mod-teaser-card-h2-margin: 2.8rem;
  --mod-teaser-card-p-margin: 2.2rem;
  --mod-teaser-card-not-p: 10rem;
  --mod-teaser-p-size: 1.8rem;
  --mod-teaser-p-line-height: 2.3rem;

  /* #endregion */

  /* #region M O D U L E _ T E X T - I M A G E */

  --mod_text-image-padding: var(--medium-padding) 0;
  --mod_text-image-size: 4rem;
  --mod_text-image-line-height: 4.2rem;
  --mod_text-image-text-size: 1.8rem;
  --mod_text-image-text-line-height: 1.2;

  /* #endregion */

  /* #region M O D U L E _ Q U O T E */

  --mod_quote-container-padding: 0 var(--medium-padding) 0 0;
  --mod_quote-name-background: var(--secondary-color-01);
  --mod_quote-name-padding: 0 0 0 5rem;
  --mod_quote-name-text-size: 1.8rem;
  --mod_quote-name-line-height: 2.5rem;
  --mod_quote-name-letter-spacing: 1px;
  /* #endregion */

  /* #region F O O T E R */
    
  --footer-background-color: var(--primary-color-01);
  --footer-color: var(--primary-background-color);
  --footer-padding: clamp(2rem, calc(1.97rem + 1.2vw), 4rem) 0 clamp(2rem, calc(1.97rem + 1.2vw), 12rem) 0;
  --footer-title-size: clamp(2.4rem, calc(1.97rem + 1.2vw), 3.2rem);
  --footer-title-weight: var(--font-weight-bold);
  --footer-title-line-height: 17px;
  --footer-link-size: 1.2rem;
  --footer-line-height: 1.42;
  --footer-letter-spacing: 1px;
  --footer-links-size: 1.2rem;
  --footer-links-weight: var(--font-weight-light);
  --footer-line-height: 2rem;
  --footer-letter-spacing: 1px;
  --footer-sozial-icon-size: 90px;
  --footer-sozial-background: var(--secondary-color-01);

  /* #endregion */


   --background-color1:var(--secondary-color-01);
   --background-color2:var(--secondary-color-03);
   --background-color3:#ffe287;
   --background-color4:var(--secondary-color-04);
   --background-color5:#ffb552;
   --background-color6:#bfb5ff;
   --background-color7:var(--secondary-color-02);
   --background-color8:rgb(255 227 130 / 75%);
}