:root{

    --main: #738694 ;
    --footer:  #586977 ;
    --background: #DBD9D3 ;
    --white: #fff ;
    --text: #303437 ;
    --icon: #F0F0F0 ;
    --topline: #575757 ;
    --kontakt: #F8F8F6 ;

}

body,html,*{font-size:20px;line-height:1.3;font-family:'tt-commons-pro';font-weight:400;font-style: normal;margin: 0;padding: 0;}
html{scroll-behavior: smooth;overflow-x: hidden;}
body{overflow-x: hidden;}

.container{max-width: 1500px;margin: 0 auto;padding: 0 15px;}

.background{background: url('../media/baustelle/isw-bg.svg');background-size: 100%;background-repeat: no-repeat;width: 100%;height: 50vh;display: block;position: absolute;bottom: 0;left: 0;z-index: -1;}

.row{display: flex;}

h1{color: var(--main);font-size: 250%;font-weight: 600;margin-top: 30px;}

.ueberschrift{width: 30%;}

.bereiche{width: 70%;margin-top: 135px;display: flex;justify-content: end;}
.bereiche span{padding: 0 25px;color: var(--main);font-size: 110%;font-weight: 500;position: relative;}
.bereiche span.abwasser::before{content: '';background: url('../media/baustelle/abwasser_blau.svg');width: 65px;height: 65px;display: block;background-repeat: no-repeat;background-size: contain;background-position: center;position: absolute;top: -80px;left: 25%;}
.bereiche span.verkehr::before{content: '';background: url('../media/baustelle/verkehr_blau.svg');width: 65px;height: 65px;display: block;background-repeat: no-repeat;background-size: contain;background-position: center;position: absolute;top: -80px;left: 25%;}
.bereiche span.landschaft::before{content: '';background: url('../media/baustelle/landschaft_blau.svg');width: 65px;height: 65px;display: block;background-repeat: no-repeat;background-size: contain;background-position: center;position: absolute;top: -80px;left: 25%;}
.bereiche span.gewaesser::before{content: '';background: url('../media/baustelle/gewaesser_blau.svg');width: 65px;height: 65px;display: block;background-repeat: no-repeat;background-size: contain;background-position: center;position: absolute;top: -80px;left: 25%;}
.bereiche span.vermessung::before{content: '';background: url('../media/baustelle/vermessung_blau.svg');width: 65px;height: 65px;display: block;background-repeat: no-repeat;background-size: contain;background-position: center;position: absolute;top: -80px;left: 25%;}

.video-wrapper{display: flex;justify-content: center;}
.video{width: 60vw;height: 350px;object-fit: cover;margin-top: 30px;}

.content{margin-top: 160px;}
.content .headline{font-size: 200%;color: var(--white);font-weight: 400;}
.content p{color: var(--white);font-size: 130%;margin-top: 30px;}

#page-footer{background-color: #5E7382;width: 100%;}
#page-footer span{color: var(--white);}
#page-footer a{text-decoration: none;color: var(--white);transition: all .3s ease;}
#page-footer a:hover{color: var(--text);transition: all .3s ease;}

#page-footer .row.top{width: 60%;justify-content: space-between;margin-top: 20px;}
#page-footer .row.top span.firmenname{font-weight: 600;}
#page-footer .row.top span, #page-footer .row.top a{font-size: 100%;font-weight: 300;position: relative;}
#page-footer .row.top a.mail::before{content: '';background: url('../media/baustelle/email.svg');background-repeat: no-repeat;background-size: contain;width: 20px;height: 20px;position: absolute;top: 2px;left: -30px;}
#page-footer .row.top a.tel::before{content: '';background: url('../media/baustelle/telephone.svg');background-repeat: no-repeat;background-size: contain;width: 20px;height: 20px;position: absolute;top: 2px;left: -30px;}

#page-footer .row.bottom{justify-content: space-between;margin-top: 100px;padding-bottom: 15px;}
#page-footer .row.bottom a.datenschutz::after{content: '|';padding-right: 15px;padding-left: 15px;}
#page-footer .row.bottom a.datenschutz:hover::after{color: var(--white);}

/* ------------------------Unterseiten------------------------------ */

.inhalt .headline{font-size: 200%;color: var(--text);margin-top: 50px;margin-bottom: 20px;}
.inhalt p{font-size: 110%;color: var(--text);width: 75%;margin: 40px 0;}
.inhalt a{font-size: 110%;color: var(--text);text-decoration: none;position: relative;padding-left: 60px;transition: all .3s ease;}
.inhalt a:hover{color: var(--main);transition: all .3s ease;}
.inhalt a::before{content: '';width: 50px;height: 2px;background-color: var(--text);position: absolute;left: 0;top: 50%;transition: all .3s ease;}
.inhalt a:hover::before{background-color: var(--main);transition: all .3s ease;}

.inhalt_zwei .headline{font-size: 200%;color: var(--text);margin-top: 50px;margin-bottom: 20px;font-weight: 500;}
.inhalt_zwei p{font-size: 110%;color: var(--text);width: 75%;margin: 5px 0 40px;}
.inhalt_zwei a{font-size: 110%;color: var(--text);text-decoration: none;position: relative;padding-left: 60px;transition: all .3s ease;}
.inhalt_zwei a:hover{color: var(--main);transition: all .3s ease;}
.inhalt_zwei a::before{content: '';width: 50px;height: 2px;background-color: var(--text);position: absolute;left: 0;top: 50%;transition: all .3s ease;}
.inhalt_zwei a:hover::before{background-color: var(--main);transition: all .3s ease;}
.inhalt_zwei strong{font-weight: 500;font-size: 110%;}
.inhalt_zwei h3{font-size: 175%;color: var(--text);margin-top: 50px;margin-bottom: 20px;font-weight: 500;}
.inhalt_zwei ul{padding: 0 0 0 40px;margin: 0 0 20px;width: 75%;}
.inhalt_zwei li{position: relative;list-style: none;line-height: 1.75;}
.inhalt_zwei ul li::before{content:'';width:25px;height:25px;display:block;background:url('../media/baustelle/check.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;left: -40px;top: 3px;}

.inhalt_drei{padding-bottom: 50px;}
.inhalt_drei .headline{font-size: 200%;color: var(--text);margin-top: 50px;margin-bottom: 20px;}
.inhalt_drei p{font-size: 110%;color: var(--text);width: 65%;margin: 5px 0 0;}
.inhalt_drei a{font-size: 110%;color: var(--text);text-decoration: none;position: relative;padding-left: 60px;transition: all .3s ease;}
.inhalt_drei a.link::before{display: none;}
.inhalt_drei a.link{padding-left: 0;}
.inhalt_drei a:hover{color: var(--main);transition: all .3s ease;}
.inhalt_drei a::before{content: '';width: 50px;height: 2px;background-color: var(--text);position: absolute;left: 0;top: 50%;transition: all .3s ease;}
.inhalt_drei a:hover::before{background-color: var(--main);transition: all .3s ease;}
.inhalt_drei strong{font-weight: 500;margin-top: 30px;font-size: 110%;}
.inhalt_drei h3{font-size: 175%;color: var(--text);margin-top: 50px;margin-bottom: 20px;}
.inhalt_drei ul{padding: 0 0 0 40px;}
.inhalt_drei li{position: relative;list-style: none;line-height: 1.75;}
.inhalt_drei ul li::before{content:'';width:25px;height:25px;display:block;background:url('../media/baustelle/check.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;left: -40px;top: 3px;}

#page-footer-unterseite{background-color: #5E7382;width: 100%;padding: 40px 0 0;}
#page-footer-unterseite span{color: var(--white);}
#page-footer-unterseite a{text-decoration: none;color: var(--white);transition: all .3s ease;}
#page-footer-unterseite a:hover{color: var(--text);transition: all .3s ease;}

#page-footer-unterseite .row.top{width: 60%;justify-content: space-between;margin-top: 20px;}
#page-footer-unterseite .row.top span.firmenname{font-weight: 600;}
#page-footer-unterseite .row.top span, #page-footer-unterseite .row.top a{font-size: 100%;font-weight: 300;position: relative;}
#page-footer-unterseite .row.top a.mail::before{content: '';background: url('../media/baustelle/email.svg');background-repeat: no-repeat;background-size: contain;width: 20px;height: 20px;position: absolute;top: 2px;left: -30px;}
#page-footer-unterseite .row.top a.tel::before{content: '';background: url('../media/baustelle/telephone.svg');background-repeat: no-repeat;background-size: contain;width: 20px;height: 20px;position: absolute;top: 2px;left: -30px;}

#page-footer-unterseite .row.bottom{justify-content: space-between;margin-top: 100px;padding-bottom: 15px;}
#page-footer-unterseite .row.bottom a.datenschutz::after{content: '|';padding-right: 15px;padding-left: 15px;}
#page-footer-unterseite .row.bottom a.datenschutz:hover::after{color: var(--white);}

/* ------------------------RESPONSIVE------------------------------- */
@media (min-width:1920px) and (min-height:1080px){

    .video{height: 400px;margin-top: 75px;}
    
    .content{margin-top: 300px;}

    #page-footer .row.bottom{margin-top: 60px;}

}

@media (max-width:1480px){
    
    .background{bottom: -220px;}

    .row.header{flex-direction: column-reverse;padding: 0 15px;}
    .row.rechts{justify-content: space-evenly;align-content: space-between;width: 100%;}
    .bereiche{width: 100%;}
    .ueberschrift{width: 100%;text-align: center;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){
 
    h1{font-size: 200%;margin-top: 60px;}

    .background{bottom: -100px;height: 50vh;}

    .video{height: 250px;}

    .content{margin-top: 80px;}
    .content .headline{font-size: 150%;}
    .content p{font-size: 100%;margin-top: 20px;}

    #page-footer .row.top{width: 70%;}
    #page-footer .row.bottom{margin-top: 70px;padding-bottom: 30px;}
    #page-footer span, #page-footer a{font-size: 75%;}

    #page-footer-unterseite .row.top{width: 70%;}
    #page-footer-unterseite .row.bottom{margin-top: 70px;}
    #page-footer-unterseite span, #page-footer-unterseite a{font-size: 75%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {

    .background{bottom: -150px;}

    h1{font-size: 160%;margin-top: 25px;}

    .bereiche{margin-top: 90px;}
    .bereiche span{font-size: 80%;padding: 0 10px;}
    .bereiche span.abwasser::before,
    .bereiche span.verkehr::before,
    .bereiche span.landschaft::before,
    .bereiche span.gewaesser::before,
    .bereiche span.vermessung::before{width: 50px;height: 50px;top: -60px;}

    .video{height: 300px;}

    .content{margin-top: 160px;}
    .content .headline{font-size: 125%;}
    .content p{font-size: 90%;}

    #page-footer{padding: 10px 0;}
    #page-footer .row.top span, #page-footer .row.top a{font-size: 90%;}
    #page-footer .row.top{width: 100%;}

    #page-footer-unterseite{padding: 10px 0;}
    #page-footer-unterseite .row.top span, #page-footer-unterseite .row.top a{font-size: 90%;}
    #page-footer-unterseite .row.top{width: 100%;}
    #page-footer-unterseite .row.bottom{margin-top: 50px;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {

    .background{background-size: contain;height: 350px;bottom: -75px;}
    
    h1{font-size: 150%;margin-top: 35px;}

    .bereiche{margin-top: 70px;}

    .bereiche span.abwasser::before, 
    .bereiche span.verkehr::before, 
    .bereiche span.landschaft::before, 
    .bereiche span.gewaesser::before, 
    .bereiche span.vermessung::before{width: 50px;height: 50px;top: -50px;}
    .bereiche span{font-size: 90%;}
    
    .video{width: 100%;height: 250px;}

    .content .headline{font-size: 100%;}
    .content p{font-size: 80%;width: 80%;}

    #page-footer .row.top span, #page-footer .row.top a{font-size: 80%;}
    #page-footer span, #page-footer a{font-size: 60%;}

    #page-footer-unterseite .row.top span, #page-footer-unterseite .row.top a{font-size: 80%;}
    #page-footer-unterseite span, #page-footer-unterseite a{font-size: 60%;}

    .inhalt a{font-size: 80%;padding-left: 40px;}
    .inhalt a::before{width: 30px;}
    .inhalt .headline{font-size: 150%;margin-top: 30px;}
    .inhalt span{font-size: 80%;}
    .inhalt p{font-size: 75%;margin: 20px 0;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:600px) {

    .background{display: none;}

    h1{font-size: 150%;}

    .bereiche{margin-top: 60px;order: 1;width: 100%;}
    .bereiche span{font-size: 60%;padding: 0 5px;}
    .bereiche span.abwasser::before, 
    .bereiche span.verkehr::before, 
    .bereiche span.landschaft::before, 
    .bereiche span.gewaesser::before, 
    .bereiche span.vermessung::before{width: 30px;height: 30px;top: -30px;}

    .video{height: 200px;}

    .content .headline{font-size: 100%;}
    .content p{font-size: 80%;width: 90%;}
    
    #page-footer .row.top, #page-footer .row.bottom{flex-wrap: wrap;}
    #page-footer .row.top, #page-footer .row.bottom{flex-direction: column;}
    #page-footer .row.top .kontakt{padding-left: 20px;margin: 10px 0;}
    #page-footer .row.top span, #page-footer .row.top a{font-size: 80%;}
    #page-footer span, #page-footer a{font-size: 70%;}

    #page-footer-unterseite .row.top, #page-footer-unterseite .row.bottom{flex-wrap: wrap;}
    #page-footer-unterseite .row.top, #page-footer-unterseite .row.bottom{flex-direction: column;}
    #page-footer-unterseite .row.top .kontakt{padding-left: 30px;margin: 10px 0;}
    #page-footer-unterseite .row.top span, #page-footer-unterseite .row.top a{font-size: 80%;}
    #page-footer-unterseite span, #page-footer-unterseite a{font-size: 70%;}

    #page-footer .row.top a.mail::before, #page-footer .row.top a.tel::before{width: 15px;height: 15px;left: -20px;}
    
    .inhalt p{width: 100%;}

    .container{padding: 0;}
    .video-wrapper{padding: 0 15px;}
    .content{margin-top: 50px;background-color: #5E7382;padding: 20px 15px;position: relative;bottom: -1px;}
    #page-footer, #page-footer-unterseite{padding:  10px 15px;}
    .inhalt_zwei, .inhalt_drei{padding: 0 15px 50px;}
    .inhalt_zwei p, .inhalt_drei p{width: 100%;font-size: 85%;}
    .inhalt_zwei .headline, .inhalt_drei .headline{font-size: 150%;}
    .inhalt_zwei a, .inhalt_drei a{font-size: 80%; padding-left: 40px;}
    .inhalt_zwei a::before, .inhalt_drei a::before{width: 30px;}
    .inhalt_zwei h3, .inhalt_drei h3{font-size: 110%;}
    .inhalt_zwei strong, .inhalt_drei strong{font-size: 90%;}
    .inhalt_zwei li, .inhalt_drei li{font-size: 85%;}
    .inhalt_drei a.link{font-size: 100%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {


    h1{text-align: center;font-size: 110%;}

    .row.header{padding: 0 5px;}

    .ueberschrift{width: 100%;}

    .bereiche{width: 100%;}

    .video{height: 180px;}

}