:root{
    /*color*/
    --clr-white: 0 0% 100%;

    --clr-dark-blue: 214 100% 28%;
    --clr-mid-blue: 205 100% 34%;
    --clr-light-blue: 200 56% 64%;

    --clr-dark-grey: 260 2% 25%;
    --clr-mid-grey: 220 1% 54%;
    --clr-light-grey: 210 3% 85%;

    --clr-mid-orange: 26 100% 54%;

    /* font-size */
    --fs-xxl: 3.5rem;
    --fs-xl: 2rem;
    --fs-l: 1.5rem;
    --fs-m: 1.25rem;
    --fs-s: 1rem;
    --fs-xs: 0.9375rem;
    --fs-xxs: 1rem;

    /*font-weight*/
    --fw-medium: 500;
    --fw-regular: 400;
    --fw-light: 300;

}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
       url('../fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('../fonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v12-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/*allgemein*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

/*color*/
.bg-white {background-color: hsl(var(--clr-white));}

.bg-dark-blue {background-color: hsl(var(--clr-dark-blue));}
.bg-mid-blue {background-color: hsl(var(--clr-mid-blue));} 
.bg-light-blue {background-color: hsl(var(--clr-light-blue));} 

.bg-dark-grey {background-color: hsl(var(--clr-dark-grey));}
.bg-mid-grey {background-color: hsl(var(--clr-mid-grey));}
.bg-light-grey {background-color: hsl(var(--clr-light-grey));} 

.bg-mid-orange {background-color: hsl(var(--clr-mid-orange));} 


.text-white {color: hsl(var(--clr-white));}

.text-dark-blue {color: hsl(var(--clr-dark-blue));}
.text-mid-blue {color: hsl(var(--clr-mid-blue));} 
.text-light-blue {color: hsl(var(--clr-light-blue));} 

.text-dark-grey {color: hsl(var(--clr-dark-grey));}
.text-mid-grey {color: hsl(var(--clr-mid-grey));}
.text-light-grey {color: hsl(var(--clr-light-grey));} 

.text-mid-orange {color: hsl(var(--clr-mid-orange));} 


/*typografie*/

.font {font-family: var(--ff-sans-serif);}

h1 {font-size: var(--fs-xxl);
    padding: 2rem 0 1rem 0;
    font-weight: var(--fw-medium);}
h2 {font-size: var(--fs-xl);
    padding: 0 0 1rem 0;
    font-weight: var(--fw-medium);}
h3 {font-size: var(--fs-l);
    padding: 3rem 0 0.5rem 0;
    font-weight: var(--fw-medium);}
h4 {font-size: var(--fs-m);
    font-weight: var(--fw-medium);}
h5 {font-size: var(--fs-xxs);
    font-weight: var(--fw-medium);}
h6 {font-size: var(--fs-xxs);
    font-weight: var(--fw-medium);}
p {font-size: var(--fs-s);
    font-weight: var(--fw-light);
    color: hsl(var(--clr-dark-grey));
    line-height: 1.8rem;
    padding: 0 0 2rem 0;
    }

.medium {font-weight: var(--fw-medium);}
.regular {font-weight: var(--fw-regular);}
.light {font-weight: var(--fw-light);}



*,
*::before,
*::after{
   box-sizing: border-box;
    }

html{
    scroll-behavior: smooth;
}

html, body { height: 100%}
body{margin: 0}

.no-wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 80%;
    gap: 5rem;
    margin: 1rem auto;
}


.cta {
    padding: 0.8rem 1rem;
    background-color: hsl(var(--clr-mid-orange));
    border-radius: 10px;
    color: hsl(var(--clr-white));
    text-decoration: none;
    font-size: var(--fs-m);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    font-weight: var(--fw-light);
    }

.cta:hover{
    background-color: color-mix(in hsl, hsl(var(--clr-mid-orange)), white 20%);
    font-weight: var(--fw-medium);   
}

.cta:active{
    background-color: color-mix(in hsl, hsl(var(--clr-mid-orange)), white 50%);  
    font-weight: var(--fw-medium);
}


/*navigation*/


nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem;
    padding: 1rem 4rem;
    }


.logo{
    width: 200px;
    order: 1;
  }

.nav {
    order: 2;
}


label {
    display: none;
    order: 3;
}


nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    
}


nav ul li a {
    text-decoration: none;
    font-size: var(--fs-m);
    font-weight: var(--fw-light);
}

    
.nav > li:not(:last-child) > a{
 color: hsl(var(--clr-dark-grey));
    
}

.nav, .nav > li > a:hover{
    font-weight: var(--fw-medium);
}

    
@media (max-width: 950px) {
   
 nav{
        display: flex;
        justify-content: space-between;
        
    }

    nav ul li{
		width: 100%;
		padding: 15px 0px;
	}

	nav ul {
		display: none;
        flex-direction: column;
        align-items: flex-start;

	}

    

    nav label{
        display: block;
    }


}
.burgericon {
	width: 30px;
	height: 30px;
	display: none;
    
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: hsl(var(--clr-dark-grey));
}


@media (max-width: 950px) {
	.burgericon {
		display: block;
        align-items: center;
	}
}
#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}
#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}





/*hero*/

.hero{
    background-image: url(assets/Hero.png);
    min-height: 80%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 3rem ;
    box-sizing: border-box;
    max-height: 90%;
}

.hero_blue{
    background: hsl(var(--clr-mid-blue));
    max-height: 80%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 3rem 8vw;
    box-sizing: border-box;
}



.hero_content {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 80vw;
    padding: 0;
    margin: 0 auto;
}


.img{
    width: 32rem;
}

/*info*/

.info {
    margin: 5rem ;
    min-width: 0vw;
    margin: 3rem auto;

}



/* sevices */
.services {
    padding: 60px 0;
    background-color: hsl(var(--clr-light-grey)/30%);   
}


.services_container {
    padding: 0 16px;
    max-width: 80%;
    margin: 0 auto;
  }


.services .service_flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    max-width: calc(300px * 4 + 22px * 3); /* verhindert mehr als 4 Spalten */
    margin: 0;
    
}

.services_card {
    background-color: hsl(var(--clr-white));
    border-radius: 5px;
    padding: 24px 22px;
    transition: 0.25s ease;
}

.services_card:hover {
    transform: translateY(-3px);
}

.services_card p{
    line-height: 1.5rem;
    padding: 0.75rem 0 0 0;
}

.services_cta {
    margin: 2rem 0 0 0;
    padding: 2rem 0;
}


/* Kleine Responsive-Anpassung */
@media (max-width: 600px) {
    .services_info h2 {
        font-size: 28px;
    }
}



/*Content*/

.content{
    max-width: 80%;
    margin: 0 auto;
    padding:  1rem;
}




/*footer*/

.footer{
    background-color: hsl(var(--clr-dark-grey));
    padding: 1rem 1rem;   
}

.footer_wrap{
    max-width: 75vw;
    margin: 0 auto;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}


.footer_social a img{
    height: 3rem;
    width: 3rem;
    padding-right: 1rem;
   

}

.footer_info{
     text-wrap: nowrap;
    
}

.footer_info a{
    color: hsl(var(--clr-white));
    text-decoration: none;
    padding-left: 1rem;
     font-weight: var(--fw-light);
}

.footer_info a:hover{
    font-weight: var(--fw-medium);
    
}



@media (max-width: 1200px) {

  /* Info-Section: Bild oben, Text unten */
  .no-wrap {
    flex-direction: column;
    align-items: center;
    text-align: left;
    max-width: 90%;
    gap: 2rem;
  }


}



@media (max-width: 840px) {

    .footer_info{
        display: flex;
        flex-wrap: wrap;
        align-items: right;
        
    }

    .footer_social{
        display: flex;
        flex-wrap: nowrap;
    }

}