@import url("reset.css");

/*-----------FONTS-----------*/

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v31-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v31-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v31-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v31-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v31-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v31-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v31-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v31-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v31-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v31-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v31-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v31-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v31-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v31-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v31-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v31-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v31-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v31-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v31-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../fonts/montserrat-v31-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v31-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v31-latin-800.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/montserrat-v31-latin-800.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/montserrat-v31-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}


/*-----------FONTGESTALTUNG-----------*/

body {font-family: 'Montserrat'}
p {font-size: 15px; font-weight: 300; line-height: 21px; color: #3f3f3f; margin-bottom: 15px;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-size: 40px; line-height: 42px; font-weight: 700; color: #043f7e; margin-bottom: 20px;}

h2 {font-size: 35px; line-height: 38px; font-weight: 700; color: #043f7e; margin-bottom: 20px;}
h2 span {font-size: 20px; font-weight: 500; color: #3f3f3f}

h3 {font-size: 22px; line-height: 25px; font-weight: 600; margin-bottom: 10px;}
h4 {font-size: 16px;}

li {font-size: 18px; line-height: 26px; margin-bottom: 10px; list-style-image: url(../images/li-1.png); list-style-position: inside;}

strong {font-weight: 700;}
b {color: #043f7e; font-weight: 500;}


/*-----------AUFBAU-----------*/

html {scroll-behavior: smooth; margin: 20px;}
.content {display: flex; width: 80%; margin-left: 10%; justify-content: space-between;}
.flex {display: flex;}
.col1 {width: 60%; margin-left: 20%;}
.col2 {width: 45%; text-align: left;} 
.col3 {width: 30%;}

.btn1 {background-color: #043f7e; border: 3px solid #043f7e; color: #fff; padding: 5px 30px; border-radius: 30px; transition: 0.5s;}
.btn2 {background-color: none; border: 3px solid #043f7e; color: #043f7e; font-weight: 600; padding: 5px 30px; border-radius: 30px; transition: 0.5s;}

.btn3 {background-color: #bae5f2; border: 3px solid #bae5f2; color: #043f7e; font-weight: 600; padding: 5px 30px; border-radius: 30px; transition: 0.5s;}
.btn4 {background-color: none; border: 3px solid #bae5f2; color: #bae5f2; font-weight: 600; padding: 5px 30px; border-radius: 30px; transition: 0.5s;}

::-moz-selection {background: #4f6e8f; color: #fff;}
::selection {background: #4f6e8f; color: #fff;}


/*-----------NAVI-----------*/

.logo {position: fixed; width: 110px; height: auto; top: 25px; left: 8%; z-index: 999;}
nav {position: fixed; background: #fff; width: 90%; z-index: 101; top: 40px; left: 5%; text-align: right; padding: 30px 0; z-index: 100; border-radius: 40px;}
nav ul {margin-right: 2%;}
nav ul li {display: inline-block; margin: 0 1%;}
nav ul li a {text-decoration: none; font-size: 15px; color: #2e2e2e; font-weight: 600;}
nav ul li a:hover {color: #043f7e}



.navi {display: none;}
.burger-nav {position: fixed; right: 10px; top: 10px; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 40px; cursor: pointer; transition: all .4s ease-in-out; background-color: #043f7e; padding: 16px 21px 21px 19px; border-radius: 100%;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-style: normal; color: #bae5f2;}
.burger-nav-anim {top: 10px; color: #bae5f2; background-color: none;}
.burger-nav-anim b:first-of-type {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.burger-nav-anim b:nth-of-type(2) {opacity: 0;}
.burger-nav-anim b:last-of-type {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -80%;}

.full-screen-nav {position: fixed; z-index: 9998; width: 100%; height: 100vh; background: #043f7e; display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0; margin: -20px;}
.full-screen-nav ul {text-align: center; display: table-cell; vertical-align: middle; width: 100%;}
.full-screen-nav ul li {list-style: none;}
.full-screen-nav ul li a {padding: 20px; display: block; font-size: 30px; color: #bae5f2; transition: all .4s ease-in-out; text-decoration: none;}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


/*-----------SUBNAV-----------*/

.subnav {position: fixed; bottom: 20px; color: #fff; z-index: 999; transition: 0.5s; width: 100%; text-align: right;}
.subnav a {color: #fff; padding: 8px 15px; font-size: 13px;  border-radius: 30px; font-weight: 600; background-color: #043f7e; margin-left: 10px; line-height: 23px;}
.subnav a:nth-of-type(2) {margin-right: 5%;}
.subnav a:hover {background-color: #dcf2f8; color: #043f7e;}


/*-----------HEADER-----------*/

header {height: 80vh; display: flex; gap: 20px;}
header .fifty-1 {background: url("../images/header.jpg") no-repeat; width: 50%; height: 100%; background-size: cover; background-position: center right; border-radius: 30px;}
header .fifty-2 {width: 45%; height: 100%; padding: 0 2.5% 0 2.5%; background-color: #bae5f2; border-radius: 30px; position: relative;}
header .fifty-2 h1+p {font-size: 20px;}

#stoerer {position: absolute; top: 30vh; width: 90%;}


/*-----------INTRO / AUBERKEIT-----------*/

#sauberkeit {padding: 150px 0; text-align: center;}
#sauberkeit img {width: 100%; height: auto; border-radius: 30px; margin: 10px 0 30px;}


/*-----------LEISTUNGEN-----------*/

#leistungen .flex {gap: 20px; margin-bottom: 20px;}

.infobox {width: 33.3%; border-radius: 30px; position: relative;}
.infotext {padding: 30px 10%;}
.infotext p {margin-bottom: 0;}
.infobox img {width: 100%; height: 300px; object-fit: cover; border-radius: 20px 20px 0 0;}

.hell {background-color: #bae5f2}
.hell h3 {color: #043f7e}
.hell p {color: #3f3f3f;}

.dunkel {background-color: #043f7e;}
.dunkel h3 {color: #bae5f2}
.dunkel p {color: #fff;}


/*-----------UNTERNEHMEN / PRIVATKUNDEN-----------*/

#infos {padding: 150px 0;}
#infos .content {align-items: center}
#infos img {width: 100%; height: 100%; object-fit: cover; border-radius: 30px;}
#unternehmen {margin-bottom: 50px;}

/*-----------ÜBER UNS-----------*/

#ueberuns {display: flex; padding: 20px 0; gap: 20px;}
#ueberuns li {list-style-image: url(../images/li-2.png)}

#ueberuns .fifty-1 {width: 45%; height: 100%; padding: 150px 2.5% 150px 2.5%; background-color: #bae5f2; border-radius: 30px; position: relative;}
#ueberuns .fifty-2 {background: url("../images/persoenlicher-service.jpg") no-repeat; width: 50%; height: auto; background-position: top right; background-size: cover; border-radius: 30px;}


/*-----------PUFFER-----------*/

#puffer {width: 100%; height: auto;}

.pufferimg {background: url("../images/bodenreinigung.jpg") no-repeat; width: 50%; height: auto; background-position: left top; background-size: cover; border-radius: 30px 0 0 30px; position: relative;}
.verlauf {position: absolute; top: 0; right: -3px; width: 50%; height: 100%;}

.puffertext {width: 40%; padding: 120px 5%; background-color: #043f7e; border-radius: 0 30px 30px 0;}
.puffertext h2 {color: #fff; font-size: 24px; line-height: 28px;}
.puffertext p {color: #fff;}


/*-----------IMPRESSUM-----------*/

#impressum {padding: 120px 0; text-align: center;}
#impressum h3 {color: #043f7e}
#impressum a {color: #043f7e; text-decoration: underline;}


/*-----------FOOTER-----------*/

footer {padding: 120px 0;}
footer strong {color: #043f7e}
footer a {text-decoration: underline; color: #043f7e}
footer h3 {color: #043f7e}

footer .col3:nth-of-type(1) {background: url("../images/reinigung-kontaktieren.jpg") no-repeat; width: 33%; height: auto; background-position: center; background-size: cover; border-radius: 30px;}

.kf {width: 100%; height: 650px;}


/*-----------RESPONSIVE-----------*/

@media screen and (max-width: 1366px) {
    .puffer{background-attachment: scroll;}
}

@media screen and (max-width: 900px) {
    h1 {font-size: 25px; line-height: 30px;}
    .logo {position: absolute; top: 40px; left: 40px;}
    header {height: 75vh;}
    
    nav {background: none; box-shadow: 0 0 0;}
    nav ul{display: none;}
    .navi {display: block;}
}

@media screen and (max-width: 900px) {
    h2 {font-size: 30px; line-height: 35px;}
    
    .content, .flex {flex-direction: column;}
    .col1 {width: 80%; margin-left: 10%;}
    .col2, .col3 {width: 100%;}
    
    header {height: 100vh;}
    header .fifty-1 {width: 100%; height: 100vh;}
    header .fifty-2 {width: 95%; height: auto;}
    
    #stoerer {position: relative!important; top: 0; padding: 50px 5%;}
    
    .infobox {width: 100%;}
    
    #infos {padding: 100px 0;}
    #infos img {margin-bottom: 10px;}
    #privatkunden {flex-direction: column-reverse;}
    
    #puffer {flex-direction: column-reverse; width: 100%;}
    .puffertext {width: 90%; padding: 60px 5%; border-radius: 30px 30px 0 0;}
    .pufferimg {height: 400px; width: 100%; border-radius:  0 0 30px 30px;}
    .verlauf {display: none;}
    
    #ueberuns .fifty-1 {width: 90%; padding: 100px 5%;}
    
    footer {padding: 50px 0;}
    footer .col3 {margin-bottom: 20px;}
}

@media screen and (max-width: 500px) {
    .btn1, .btn2, .btn3, .btn4 {font-size: 12px; padding: 5px 15px;}
}