@import url("reset.css");

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

/* raleway-300 - 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: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v37-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v37-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v37-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v37-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v37-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v37-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v37-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v37-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v37-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v37-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v37-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v37-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v37-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v37-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v37-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v37-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v37-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v37-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v37-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v37-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v37-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v37-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v37-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v37-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/raleway-v37-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v37-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v37-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v37-latin-800.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v37-latin-800.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v37-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
}


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

body {font-family: 'Raleway'}
p {font-size: 16px; line-height: 24px; font-weight: 300; margin-bottom: 15px; color: #3e3e3e;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-size: 55px; line-height: 55px; font-weight: 700; margin-bottom: 10px; color: #fff; margin-bottom: 20px;}
h2 {font-size: 45px; line-height: 45px; font-weight: 700; color: #0f2f53}
h3 {font-size: 20px; line-height: 23px; font-weight: 700; margin-bottom: 10px; color: #0f2f53;}
h4 {font-size: 16px;}
li {font-size: 18px; line-height: 22px; margin-bottom: 10px; list-style-position: inside; list-style-image: url(../images/li.png)}
strong {font-weight: 600;}
.gold {color: #c9a86a}


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

html {scroll-behavior: smooth;}
.content {display: flex; width: 80%; margin-left: 10%; justify-content: space-between;}
.flex {display: flex;}
.col1 {width: 80%; margin-left: 10%;}
.col2 {width: 45%; text-align: left;} 
.col3 {width: 30%; text-align: center;}
.headline {margin-bottom: 50px;}
.line {width: 80px; height: 5px; background-color: #c9a86a; border-radius: 5px; margin: 20px 0;}

.btn {background-color: #c9a86a; border: 3px solid #c9a86a; font-size: 15px; font-weight: 800; color: #fff; padding: 5px 20px; transition: 0.5s; border-radius: 5px;}
.btn2 {background-color: none; border: 3px solid #fff; font-size: 15px; font-weight: 800; color: #fff; padding: 5px 20px; transition: 0.5s; border-radius: 5px;}
.btn:hover {background-color: #987739; border: 3px solid #987739;}
::-moz-selection {background: #c9a86a; color: #fff;}
::selection {background: #c9a86a; color: #fff;}


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

.logo {position: fixed; width: 120px; height: auto; top: 15px; left: 5%; z-index: 9999;}
nav {position: fixed; width: 100%; height: 50px; z-index: 101; top: 0; text-align: right; padding: 22px 0 30px; z-index: 100; background-image: linear-gradient(to top, rgba(15,47,83,0), rgba(3,24,48,1));}
nav ul {margin-right: 5%;}
nav ul li {display: inline-block; margin: 0 1%;}
nav ul li a {text-decoration: none; font-size: 16px; color: #fff; font-weight: 600;}
nav ul li a:hover {color: #c9a86a}

.navi {display: none;}
.burger-nav {position: fixed; right: 0; top: -6px; color: #fff; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 40px; cursor: pointer; transition: all .4s ease-in-out; background-color: #0f2f53; padding: 16px 21px 21px 19px; border-radius:  15px 0 0 0;}
.burger-nav b {transition: all .4s ease-in-out; float: left; color: #c9a86a; margin-left: 0; font-family: 'Raleway'; font-style: normal;}
.burger-nav-anim {top: -5px; color: #c9a86a;}
.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: #0f2f53; display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0;}
.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: #fff; transition: all .4s ease-in-out; text-decoration: none;}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


/*-----------ASIDE-----------*/

aside img {position: fixed; background-color: #0f2f53; width: 40px; z-index: 999; right: 10px; border-radius: 8px; transition: 0.5s;}
aside img:hover {transform: scale(1.2);}
.phone {top: 300px;}
.mail {top: 370px;}
.maps {top: 440px;}


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

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


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

header {background: url("../images/sachverstaendiger-header.jpg") no-repeat; height: 100vh; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

#stoerer {position: absolute; left: 5%; bottom: 20vh; width: 70%;}
#stoerer span {font-size: 20px; font-weight: 700; color: #c9a86a;}
#stoerer p {font-size: 25px; line-height: 28px; font-weight: 700; color: #fff; margin-bottom: 20px;}


/*-----------VORTEILE-----------*/

#vorteile {padding: 120px 0; text-align: center;}
#vorteile .line {margin: 20px auto;}

.grid {display: flex;}
.grid:nth-of-type(1) {border-bottom: 2px solid #e7eaed;}

.gridbox {width: 33.3%; padding: 30px 20px;}
.gridbox:nth-of-type(2) {border-left: 2px solid #e7eaed; border-right: 2px solid #e7eaed;}

.icon {width: 60px; height: auto; margin-bottom: 10px;}


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

#leistungen {padding: 120px 0; background: url("../images/background.jpg") no-repeat; background-size: cover; background-position: center; position: relative; text-align: center;}
#leistungen .line {margin: 20px auto;}
#leistungen .flex {column-gap: 30px; margin-bottom: 30px; align-items: stretch}

.box {background-color: #fff; width: 25%; padding: 30px 40px 50px; border-radius: 15px;} 
.box h3 {font-size: 16px; margin-bottom: 20px;}
.box .btn {font-size: 12px; padding: 5px 10px;}

/*--Popup--*/

.popup-style {margin: 0; width: 80%; min-height: 20px; padding: 80px 5%; background-color: #051629; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); backdrop-filter: blur(20px); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); transform: scale(1); border-radius: 20px;}

.popup-style a {color: #1B5D84}
.popup-style a:hover {opacity: 0.8; text-decoration: none}
.popup-style h3 {color: #c9a86a}
.popup-style p, .popup-style li {color: #fff; text-align: left;}
.popup-style h4 + p {padding-top: 1rem}
button {margin: 0; padding: 0; background: none; border: none}
.close-popup {transition: all 1s ease; cursor: pointer; position: fixed; font-size: 20px; top: 20px; right: 20px; font-weight: 800; color: #c9a86a;}
.close-popup i {transition: all 1s ease; font-size: 2rem; color: #c9a86a}
.close-popup:hover i {color: #020D1A}


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

.puffer {background: url("../images/baugutachten-sangerhausen.jpg") no-repeat; height: 600px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center top; position: relative;}

#stoerer2 {position: absolute; left: 5%; bottom: 15vh; width: 70%;}
#stoerer2 h2 {font-size: 55px; line-height: 55px; color: #fff; margin-bottom: 10px;}
#stoerer2 h3 {font-size: 25px; line-height: 25px; color: #c9a86a; margin-bottom: 30px;}


/*-----------ÜBERMICH-----------*/

#uebermich {padding: 120px 0;}
#uebermich .content {display: flex; align-items: center;}
#uebermich .col2 {position: relative;}

.hellmuth {width: 100%; height: auto; max-width: 700px; border-radius: 25px;}
.name {position: absolute; left: 50px; bottom: -30px; background-color: #c9a86a; padding: 10px 20px; border-radius: 10px;}
.name p {color: #fff; margin-bottom: 0;}
.name strong {font-weight: 800;}


/*-----------EINSATZGEBIET-----------*/

#einsatzgebiet {padding: 100px 0; background: url("../images/einsatzgebiet-background.jpg") no-repeat; background-size: cover; background-position: center; position: relative; text-align: center; color: #fff;}
#einsatzgebiet p, #einsatzgebiet h2 {color: #fff;}

#einsatzgebiet .content {display: flex; align-items: center;}
.de {width: 100%; height: auto; max-width: 500px;}


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

#kontakt {padding: 120px 0;}
#kontakt .content {display: flex; align-items: center;}
#kontakt p a {text-decoration: underline;}


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

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


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

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

@media screen and (max-width: 1150px) {
    #leistungen .flex { flex-wrap: wrap;}
    .box {width: 90%; padding: 30px 5% 40px; margin-bottom: 20px;}
}

@media screen and (max-width: 900px) {
    .logo {position: absolute;}
    header {height: 75vh;}
    nav {background: none; box-shadow: 0 0 0;}
    nav ul{display: none;}
    .navi {display: block;}
    
    h1 {font-size: 40px; line-height: 40px;}
    h2 {font-size: 35px;}
    
    #stoerer {bottom: 10vh; width: 80%;}
    #stoerer p {font-size: 20px;}
    
    .content, .flex, .grid {flex-direction: column;}
    .col2, .col3 {width: 100%;}
    
    .grid {width: 100%;}
    .gridbox {width: 90%; padding: 30px 5%}
    .gridbox:nth-of-type(2) {border-top: 2px solid #e7eaed; border-bottom: 2px solid #e7eaed; border-left: none; border-right: none;}
    
    .hellmuth, .de {margin-top: 50px;}
    
    #stoerer2 {width: 90%;}
    #stoerer2 h2 {font-size: 40px; line-height: 45px;}
    
    #uebermich .content, #kontakt .content {flex-direction: column-reverse}
    
    #kontakt .col2:nth-of-type(2) {margin-bottom: 40px;}
}

@media screen and (max-width: 600px) {
    h1 {font-size: 25px; line-height: 30px;}
    #stoerer span {font-size: 18px; line-height: 20px;}
    #stoerer p {font-size: 18px;}
    #stoerer .btn {font-size: 12px;}
}

@media screen and (max-width: 500px) {
}