/*! _variables.css */

/******************************   V A R I A B L E N   ******************************/

:root   {

    --transition: all 0.5s ease-in-out;
    --border-radius: 6px;
    --border-radius_small: 20px;
    --border-radius_extra_small: 5px;
    --box-shadow: 0 5px 19px 0 rgba(0, 0, 0, 0.17);
}
 
/******************************   C O L O R S  ******************************/
 
:root   {

    /*--red: #ad1839;
    --filter_red:invert(14%) sepia(86%) saturate(2937%) hue-rotate(332deg) brightness(94%) contrast(97%);

    --grey_dark: #5a5a5a;
    --grey_medium-dark: #7f7f7f;
    --grey_medium: #808080;
    --grey_medium-light: #a2a2a2;
    --grey_light: #c3c3c3;
    --grey_light_light: #ededed;*/

    --white: #FFFFFF;
    --black: #000000;
    
    --darkblue: #00325b;
    --orange:#ff5a00;

    --mediumblue:#a5b2c8; /* before lightblue*/
    --darkgrey:#706f6f;

    --lightblue:#e4e9ef; /* before mediumgrey */
    --lightgrey:#f8f8f8;
    
    --green:#03a64a;    


    /*--lightblue:#a5b2c8;
    --darkgrey:#706f6f;
    --mediumgrey:#e4e9ef;
    --lightgrey:#f8f8f8;
    --green:#03a64a;*/

    /*--medium-black: #3e3d3d;*/
    --text-color-dark: #00325b;
    --text-color-light: #FFFFFF;

    --background_white: #ffffff;
    --background_blue: #00325b;
    --background_grey: #706f6f;
    --background_lightgrey:#f8f8f8;


    --border-color-1: #dad2ba;
    /*--border-color-2: #bd0035;*/

  
}

/******************************   E X P L A N A T I O N  ******************************/
/*


name of variables:

--TAG_DEFINITION: value 


using clamp

E.g. clamp(1.6rem, calc(1.67rem + -0.19vw), 1.4rem);
clamp generator: https://observablehq.com/@saneef/fluid-typography-css-clamp-value-generator

Viewport: min = 360px
Viewport: max = Breite Container
Viewport: max = 1276px


RemBase = 10 

Color Filter for SVG:
https://codepen.io/sosuke/pen/Pjoqqp

px to em
https://www.w3schools.com/cssref/css_pxtoemconversion.php



100 – Thin.
200 – Extra Light (Ultra Light)
300 – Light.
400 – Normal.
500 – Medium.
600 – Semi Bold (Demi Bold)
700 – Bold.
800 – Extra Bold (Ultra Bold)
900 - Black


*/



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

:root   {

    --font-size_48: clamp(3.2rem, calc(2.54rem + 1.83vw), 4.8rem);
    --font-size_38: clamp(3rem, calc(2.67rem + 0.91vw), 3.8rem);
    --font-size_32: clamp(2.8rem, calc(2.63rem + 0.46vw), 3.2rem);
    --font-size_22: clamp(2rem, calc(1.92rem + 0.23vw), 2.2rem);
    --font-size_24: clamp(2.2rem, calc(2.12rem + 0.23vw), 2.4rem);
    --font-size_18: clamp(1.8rem, calc(1.8rem + 0vw), 1.8rem);
    --font-size_16: clamp(1.6rem, calc(1.6rem + 0vw), 1.6rem);
    --font-size_14: clamp(1.4rem, calc(1.4rem + 0vw), 1.4rem);


/* 16  */
    --clamp_16-14: clamp(1.4rem, calc(1.32rem + 0.22vw), 1.6rem);    

/* 18  */
    --clamp_18-14: clamp(1.4rem, calc(1.24rem + 0.46vw), 1.8rem);   



/* 20  */
    --clamp_20-16: clamp(1.6rem, calc(1.44rem + 0.44vw), 2rem);


/* 22  */
    --clamp_22-18: clamp(1.8rem, calc(1.64rem + 0.44vw), 2.2rem);
    --clamp_22-16: clamp(1.6rem, calc(1.4rem + 0.55vw), 2.1rem);
    --clamp_22-14: clamp(1.4rem, calc(1.13rem + 0.84vw), 2.2rem);

/* 30  */
    --clamp_30-16: clamp(1.6rem, calc(1.05rem + 1.53vw), 3rem);

/* 32  */
    --clamp_32-16: clamp(1.6rem, calc(0.9rem + 1.86vw), 3.2rem);
    --clamp_32-20: clamp(2rem, calc(1.53rem + 1.31vw), 3.2rem);

/* 36  */
    --clamp_36-16: clamp(1.6rem, calc(0.77rem + 2.29vw), 3.7rem);

/* 38  */
    --clamp_38-20: clamp(2rem, calc(1.17rem + 2.31vw), 3.8rem);

/* 48  */
    --clamp_48-24: clamp(2.4rem, calc(1.29rem + 3.08vw), 4.8rem);



/* 64  */
    --clamp_64-32: clamp(3.2rem, calc(1.81rem + 3.72vw), 6.4rem);

/* 105 */
    --clamp_105-24: clamp(2.4rem, calc(-1.13rem + 9.41vw), 10.5rem);



    /*  B O D Y  */
    /*--body_font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
    --title_font-family: 'Proxima Nova Extra-bold', Arial, Helvetica, sans-serif;
    */
    --body_font-family:  "Inter"; 
    --body_color: var(--darkgrey);
    --body_font-size: var(--font-size_16);
    --body_font-weight: normal;
    --body_line-height: clamp(1.8rem, calc(1.45rem + 0.93vw), 2.6rem);
    --body_margin-bottom: 2.4rem; /* stil do define*/
  

    /*  H 1  */
    --h1_color: var(--text-color-dark);
    --h1_font-size: var(--clamp_48-24);
    --h1_font-weight: 700;
    --h1_line-height: 1.35;
    --h1_margin-bottom: 3.2rem;
    /*--h1_text-transform: uppercase;*/

    /*  H 2  */
    --h2_color: var(--text-color-dark);
    --h2_font-size: var(--clamp_38-20);
    --h2_font-weight: 700;
    --h2_line-height: clamp(2.7rem, calc(1.7rem + 2.67vw), 5rem);
    --h2_margin-bottom: 3.2rem;
    /*--h2_text-transform: uppercase;*/
    /*--h2_margin-top: clamp(5rem, calc(3.98rem + 2.83vw), 8rem);*/

    
    /*  H 3  */
    --h3_color: var(--text-color-dark);
    --h3_font-size: var(--clamp_22-18);
    --h3_font-weight: 700;
    --h3_line-height: clamp(3rem, calc(2.83rem + 0.46vw), 3.4rem);
    --h3_margin-bottom:3.2rem;  
 /*   --h3_text-transform: uppercase;*/
 
    /*  H 4 */
    --h4_color: var(--text-color-dark);
    --h4_font-size: var(--font-size_16);
    --h4_font-weight: 700;
    --h4_line-height: clamp(1.8rem, calc(1.45rem + 0.93vw), 2.6rem);
    --h4_margin-bottom: 3.2rem;
    /*--h4_text-transform: uppercase;*/
  
    /*  H 5  */
    --h5_color: var(--text-color-dark);
    --h5_font-size: var(--font-size_14);
    --h5_font-weight: 700;
    --h5_line-height: clamp(1.8rem, calc(1.63rem + 0.46vw), 2.2rem);
    --h5_margin-bottom: 3.2rem;
    /*--h5_letter-spacing:0;*/
  /*  --h5_text-transform: uppercase;*/
 
    /*  H 6  */
    --h6_color: var(--text-color-dark);
    --h6_font-size:var(--font-size_14);
    --h6_font-weight: 700;
    --h6_line-height: clamp(1.8rem, calc(1.63rem + 0.46vw), 2.2rem);
    --h6_margin-bottom: 3.2em;

    /*  T O P L I N E  */
    /*--topline_font-size: 1.4rem;
    --topline_font-weight: 500;
    --topline_color: var(--text-color-dark);
    --topline_line-height: 1;
    --topline_letter-spacing: 2.4px;
    --topline_margin-bottom: 47px;
    --topline_text-transform: uppercase;
*/
    /* Subline */
    --subline_color: var(--darkgrey);
    --subline_font-size: var(--font-size_22);
    --subline_font-weight: 400;
    --subline_line-height: clamp(4.1rem, calc(2.83rem + 0.46vw), 4.5rem);
    --subline_margin-bottom:3.2rem;  

}