@font-face {
	font-family: light;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/Montserrat/Montserrat-Light.ttf) format("truetype");
}
@font-face {
	font-family: regular;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/Montserrat/Montserrat-Regular.ttf) format("truetype");
}
@font-face {
	font-family: medium;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
}

@font-face {
	font-family: semi-bold;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
}
@font-face {
	font-family: bold;
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/Montserrat/Montserrat-Bold.ttf) format("truetype");
}

:root {
   /* ------------------
        typo 
    ------------------ */
    --step_800: clamp(1.375rem, 0.8414rem + 2.1891vw, 4.125rem); /* max 66px -  Display 390 - 2400 */
    --step_700: clamp(1.125rem, 0.8825rem + 0.995vw, 2.375rem); /* max 38px - Display 390 - 2400 */
    --step_600: clamp(1rem, 0.8787rem + 0.4975vw, 1.625rem); /* max 26px - Display 390 - 2400 */
    --step_500: clamp(0.875rem, 0.7537rem + 0.4975vw, 1.5rem); /* max 24px - Display 390 - 2400 */
    --step_450: clamp(0.75rem, 0.653rem + 0.398vw, 1.25rem); /* Display 390 - 2400 */    
    --step_400: clamp(0.75rem, 0.6772rem + 0.2985vw, 1.125rem); /* Display 390 - 2400 */
    --step_300: clamp(0.6875rem, 0.6269rem + 0.2488vw, 1rem); /* Display 390 - 2400 */

    --fs_800: var(--step_800); /* max 66px /// hero logo - bold/regular(light)  */
    --fs_700: var(--step_700); /* max 38px /// p in hero - regular - 1.1lh /// h2 - semi-bold 1.1lh */
    --fs_600: var(--step_600); /* max 26px /// h3 - semi-bold - 1.15lh */
    --fs_500: var(--step_500); /* max 24px /// bulletpoints - regular - 1.3lh */
    --fs_450: var(--step_450); /* max 20px /// Copy Text big - regular - 1.5lh */
    --fs_400: var(--step_400); /* max 18px /// Copy Text small - regular - 1.5lh /// Buttons */
    --fs_300: var(--step_300); /* max 16px /// Copy Text p in cards - regular - 1.5lh */
    
    --fs_price_small: clamp(0.625rem, 0.5765rem + 0.199vw, 0.875rem); /* 10px - max 14px /// Sterntext */
    --fs_price_67: clamp(1.6875rem, 1.2024rem + 1.99vw, 4.1875rem); /* 27px - max 67px /// je Standort... */
    --fs_price_100: clamp(2.5625rem, 1.847rem + 2.9353vw, 6.25rem); /* 41px - max 100px /// ab */
    --fs_price_169: clamp(4.3125rem, 3.0998rem + 4.9751vw, 10.5625rem); /* 69px - max 169px /// XX € */

    --lh_18: 1.8; /*  */
    --lh_16: 1.6; /*  */
    --lh_15: 1.5; /*  */
    --lh_14: 1.4; /*  */
    --lh_13: 1.3; /*  */
    --lh_12: 1.2; /* */
    --lh_115: 1.15; /* */
    --lh_11: 1.1; /* */
    --lh_1: 1; /*  */

    /* ------------------
		spacing
	------------------ */      
   --spacer_360: clamp(7.5rem, 2.8864rem + 18.9274vw, 15rem); /* 390 - 1024  120 - 240px */
   --spacer_240: clamp(6rem, 5.0773rem + 3.7855vw, 7.5rem); /* 390 - 1024   96 - 120px */
   --spacer_200: clamp(5rem, 3.7697rem + 5.0473vw, 7rem); /* 390 - 1024   96 - 120px */
   --spacer_120: clamp(4rem, 2.7697rem + 5.0473vw, 6rem); /* 390 - 1024   64 - 96px */
   --spacer_96: clamp(3rem, 2.3849rem + 2.5237vw, 4rem); /* 390 - 1024   48 - 64px */
   --spacer_80: clamp(2.5rem, 1.8849rem + 2.5237vw, 3.5rem); /* 390 - 1024   32 - 48px */
   --spacer_64: clamp(2rem, 1.3849rem + 2.5237vw, 3rem); /* 390 - 1024   32 - 48px */
   --spacer_56: clamp(1.5rem, 0.8849rem + 2.5237vw, 2.5rem); /* 390 - 1024   24 - 32px */
   --spacer_48: clamp(1rem, 0.3849rem + 2.5237vw, 2rem); /* 390 - 1024   24 - 32px */
   --spacer_32: clamp(0.75rem, 0.2886rem + 1.8927vw, 1.5rem); /* 390 - 1024   12 - 24px */
   --spacer_24: clamp(0.625rem, 0.5481rem + 0.3155vw, 0.75rem); /* 390 - 1024   10 - 12px */
   --spacer_16: clamp(0.5rem, 0.4231rem + 0.3155vw, 0.625rem); /* 390 - 1024   8 - 10px */

   --gray_bg_fluid: #D5DDE5;
}

body {
    font-family: regular;
    font-size: var(--fs_450);
    color: var(--n1Blue);
    padding: 0;
    margin: 0;
    background-color: #fff;
    overflow-x: hidden; /*for Intersection Animations*/
 }

 p {
    font-family: regular;
    font-size: var(--fs_450);
    line-height: var(--lh_15);
 }

 b {
    font-family: semi-bold;
 }

 a {
    color: var(--n1Blue);
    text-decoration: underline !important;
 }

 h1, .h1 {
    font-family: bold;
    line-height: 1.05;
 }
 
 h2, .h2,
 .legally-relevant h1 {
    font-family: semi-bold;
    font-size: var(--fs_700);
    line-height: var(--lh_11);
    text-transform: uppercase;
    margin-bottom: var(--spacer_48);
 }
 h3, .h3 {
    font-family: semi-bold;
    font-size: var(--fs_600);
    line-height: var(--lh_115);
    text-transform: uppercase;
 }
 
 h4, .h4 {
    font-family: semi-bold;
    font-size: var(--fs_500);
    line-height: var(--lh_115);
    text-transform: uppercase;
 }

 img {
   max-width: 100%;
 }

 .spacer_16{
    height: var(--spacer_16);
 }
 .spacer_24{
    height: var(--spacer_24);
 }
 .spacer_32{
    height: var(--spacer_32);
 }
 .spacer_48{
    height: var(--spacer_48);
 }
 .spacer_56{
    height: var(--spacer_56);
 }
 .spacer_64{
    height: var(--spacer_64);
 }
 .spacer_80{
    height: var(--spacer_80);
 }
 .spacer_96{
    height: var(--spacer_96);
 }
 .spacer_120{
    height: var(--spacer_120);
 }
 .spacer_200{
    height: var(--spacer_200);
 }
 .spacer_240{
    height: var(--spacer_240);
 }
 .spacer_360{
    height: var(--spacer_360);
 }

.hero-section{
    width: 100%;
    height: 30rem;
    margin-bottom: var(--spacer_120);
}

.hero-section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.header-section{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header-section .right-container{
    display: flex;
    flex-direction: column;
    min-width: fit-content;
    gap: 2rem;
    border-top: 2px solid var(--n1Blue);
    padding-top: 1rem;
}

.right-container .top-container{
    display: flex;
    justify-content: space-between;
}

.right-container .social-container{
    display: flex;
    gap: .5rem;
}

.right-container .author-container{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-section .author-container img{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
}

section.job-header{
   background-color: var(--gray_bg_fluid);
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
}

@media (min-width: 59em) { /* Desktop */
    .hero-section{
        height: 80vh;
    }

    .header-section{
        flex-direction: row;
    }

    .header-section .right-container{
        border-top: none;
        padding-top: 0;
        padding-left: 1rem;
        border-left: 2px solid var(--n1Blue);
    }
}