@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

* {
	margin: 0;
	padding: 0;
}

html, body{
	width: 100% !important;
    overflow-x: hidden;
}

section{
	padding: 16px;
	overflow-x: hidden;
}

/* Landing Page Start */

#landing-page{
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
    padding: 16px;
	padding-top:0px;
    overflow-x: hidden;
	height:80vh;
	background: url(../img/hero.jpg) no-repeat left !important;
}

/* Landing Page End */


/* Hero Text START */
.hero-text{
	max-width:650px;
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.hero-text h2{
	color: #FFF;
	text-align: center;
	font-family: Roboto, sans serif;
	font-weight:900;
	font-size: 32px;
	text-transform: uppercase;
	font-style: normal;
	margin-bottom: 60px;
}

.hero-text p{
	font-family: Roboto, sans serif;
	font-weight:300;
	font-size:16px;
	color: #FFF;
	text-align: center;
	margin-bottom: 30px;
}
.hero-text a{
	color:#FFF;
	text-transform: uppercase;
	font-family: Roboto, sans serif;
	font-weight:900;
	padding: 10px 20px;
	width:120px;
	display:flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: solid #fff 1px;
	margin:15px;
	text-decoration: none;
	transition: color .25s ease-in-out;
}
.hero-text a:hover{
	color:#2A414A;
	background-color:#fff;
	transition: color .25s ease-in-out;
}


.hero-logo{
	width:100px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom:30px;
}


/* Hero Text END */



/* Element Title START */

.title-container{
	width:100%;
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top:32px;
}

.title-text{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color:gray;
	width:100%;
	max-width:512px;
}

.title-text .line-top{
	width:100%;
	height:4px;
	background-color:#000;
	margin-left:48px;
	margin-top:24px;
	display: block;
}

.title-text .title-text-p{
	margin:16px;
	font-family: Roboto, sans-serif;
	font-weight:700;
	font-size:45px;	
	text-align: center;
}

.title-text .line-bottom{
	width:100%;
	height:4px;
	background-color:#000;
	margin-left:-48px;
	margin-bottom:16px;
	display: block;
}

.mini-title{
	margin-left:16px;
	margin-top:24px;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	font-size: 20px;
	line-height: 23px;
	text-align: left;
	text-transform: uppercase;
}

/* Element Title END */

/* Simple Text START */
.simple-text{
	font-family:Roboto, sans-serif;
	font-size:16px;
	line-height:150%;
	margin-top:16px;
	font-weight:300;
}
/* Simple Text END */

/* H2 START */
h2{
    width: 100%;
    text-align: center;
    margin-top: 24px;
}
/* H2 END */



/* ÜBER UNS START */

#ueber-uns h2{
	color:#2A414A;
	text-align: center;
	font-family: Roboto, sans serif;
	font-weight:900;
	font-size: 32px;
	text-transform: uppercase;
	font-style: normal;
	margin-bottom: 60px;	
}

.ueber-uns-text{
	max-width:720px;
	margin-bottom:120px;
}

.ueber-uns-icon{
	display:flex;
	align-items: center;
	justify-content: center;
	margin-bottom:60px;
}

/* ÜBER UNS END */


/* Leistungen START */

#leistungen{
	background-color:#EDF2F4;
	width: calc(100% - 32px);
	display:flex;
	align-items:center;
	justify-content: center;
	flex-direction: column;
}

#leistungen h2{
	color: #2A414A;
	text-align: center;
	font-family: Roboto, sans serif;
	font-weight:900;
	font-size: 32px;
	text-transform: uppercase;
	font-style: normal;
	margin-bottom: 120px;
	width:100%;
}

.wrapper-leistungen{
	width:100%;
	max-width: 720px;
	margin-bottom:0px;
}

.leistung-box{
	display:flex;
	margin-bottom:60px;
}


.leistung-text h3{
	color: #2A414A;
	font-family: Roboto, sans serif;
	font-weight:900;
	font-size: 24px;
	text-transform: uppercase;
	font-style: normal;
	margin-bottom: 15px;	
}

.leistung-text p{
	color: #2A414A;
	font-family: Roboto, sans serif;
	font-weight:300;
	font-size: 16px;
}

.leistung-icon{
	margin-right:120px;
}

.leistungen-sonstiges{
	width:100%;
	max-width:720px;
	margin-bottom:120px;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.leistungen-sonstiges p{
	width:100%;
	color: #2A414A;
	font-family: Roboto, sans serif;
	font-weight:700;
	font-size: 16px;
	text-align: center;
}

.leistungen-sonstiges a{
	color: #36BCD0;
    text-transform: uppercase;
    font-family: Roboto, sans serif;
    font-weight: 900;
    padding: 10px 20px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: solid #36BCD0 1px;
    margin: 15px;
    text-decoration: none;
	margin-top:60px;
	transition: color .25s ease-in-out;
}


.leistungen-sonstiges a:hover{
		color: #EDF2F4;
	background-color: #36BCD0;
	transition: color .25s ease-in-out;
}


/* Leistungen END */


/* Referenzen Start */

#referenzen h2{
	text-align: center;
	font-family: Roboto, sans serif;
	font-weight:900;
	font-size: 32px;
	text-transform: uppercase;
	font-style: normal;
	margin-bottom: 60px;
}


/* Referenzen End */



/* KONTAKT START */


#kontakt{
	background-color:#2A414A;
	color:#fff;
	display: flex;
    flex-direction: column;
	align-items: center;
}

#kontakt h2{
	color:#FFF;
	text-align: center;
	font-family: Roboto, sans serif;
	font-weight:900;
	font-size: 32px;
	text-transform: uppercase;
	font-style: normal;
	margin-bottom: 60px;	
}

.kontakt-wrapper{
	display:flex;
}

.kontakt-foto-img{
	width:180px;
	margin-right:60px;
}

.kontakt-text h3{
	font-family: Roboto Slab, serif;
	font-size: 20px;
	text-transform: uppercase;
	font-style: bold;
	margin-bottom: 30px;
}

.kontakt-foto{
	display:flex;
}

.kontakt-icon-text{
	display:flex;
	margin-bottom:30px;
}

.kontakt-icon-text div{
	margin-right:15px;
}

.kontakt-icon-text a{
	color:#FFF;
	text-decoration: none;
	font-family: Roboto, sans-serif;
	font-weight:300;
	font-size:16px;
	cursor:pointer !important;
}

.kontakt-icon-text a:hover{
	color:#36BCD0;
}

.kontakt-icon-text p{
	color:#FFF;
	font-family: Roboto, sans-serif;
	font-weight:300;
	font-size:16px;
}

.dse-imp-wrapper a{
	color:#FFF;
	text-decoration: none;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	width: 120px;
	border: 1px solid #FFF;
		text-transform: uppercase;
    font-family: Roboto bold, sans-serif;
	cursor: pointer !important;
}

.dse-imp-wrapper a:hover{
	background-color:#FFF;
	color: #2A414A;
	transition: color .25s ease-in-out;
	cursor: pointer !important;
}

.dse-imp-wrapper a:first-child{
	margin-right:30px;
}

.dse-imp-wrapper{
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top:60px;
	width:540px;
}

.footer-info{
    font-family: Roboto, sans-serif;
    font-weight: 100;
    font-size: 12px;
    margin-top: 30px;
    line-height: 150%;
    padding-bottom: 15px;
    border-bottom: solid 1px #FFF;
	margin-top:60px;
}

.web-design{
	font-family: Roboto, sans-serif;
	font-weight:100;
	font-size:10px;
	margin-top:15px;
	line-height: 150%;
}

.web-design a{
	text-decoration: none;

    font-size: 10px;
    color: #FFF;
	margin-bottom:15px;
}

.web-design a:hover{
	color: #00E5F3;
    transition: color .25s ease-in-out
}

.kontakt-dsgv{
		margin-top:30px;
}

/* KONTAKT END */



/* Referenzen Start */

#referenzen h2{
	color: #2A414A;
}

.referenz-box{
	margin-bottom:60px;
	padding: 30px 15px;
	background-color:#2A414A;
}

.referenz-titel{
width:100%;
	text-align: center;
	margin-bottom:30px;
	color:#FFF;
}

.referenz-fotos{
	width:100%;
	display:flex;
	align-items: center;
	justify-content: center;
}

.referenz-before, .referenz-after{
	margin: 15px;
}

.referenz-before img, .referenz-after img{
	max-width: 350px;
}

.referenz-before p, .referenz-after p{
	width:100%;
	text-align: center;
	margin: 15px;
	color:#FFF;
}

/* Referenzen End */

 
/* DESKTOP */

@media (min-width: 720px) {
	body{
		display:flex;
		align-items:center;
		justify-content: center;
		flex-direction: column;
	}
	#landing-page{
		width:100%;
		display:flex;
        align-items: center;
		background: url("../img/hero.jpg") no-repeat top !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	#landing-page .teaser-foto, #landing-page .teaser-foto img{
		opacity:0;
height:80vh;
	}
	.color-quote-container{
		max-height:300px;
	}
	
	#kontakt{
		margin-top:0px;
		width:100% !important;
	}
	.mini-title{
		width:100%; 
		max-width:720px;
	}
	#kontakt .negative{
		margin-top:0px;
	}
	.menu-desktop{
		display:flex;
	}
	.hamburger-mobile{
		display:none;
	}
	.menu-desktop a{
		text-decoration: none;
    margin: 0 15px;
    text-transform: uppercase;
		font-family: Roboto, sans-serif;
    font-size: 14px;
		color:#FFFFFF;
	}
	.menu-desktop a:hover{
		color:#36BCD0;
		transition: color .25s ease-in-out;
	}
	.menu-desktop a:last-child{
		margin-right:0px;
	}
	.dse-imp{
		flex-direction: row;
	}
	.dse-imp a:first-child{
		margin-right:30px;
	}
	
}
/* DESKTOP */


/* iPhone SE oä */

@media (max-width: 420px) {
	.dropdown-mobile a {
		font-size:22px;
		padding:12px;
    margin: 6px 28px !important;
}
	.datenschutz .title-text .title-text-p{
		font-size:35px !important;
	}
}

/* iPhone SE oä */


/* IMPRESSUM */

.impressum-inhalt h1{
	width:100%;
	text-align: center;
	font-size:36px;
	text-transform: uppercase;
	margin-top:120px;
}

.impressum{
	margin-top:100px;
}

.impressum h1, h2, p, a{
	font-family: Roboto, sans-serif;
}

.impressum h2{
	text-transform: uppercase;
	text-align: left;
	margin-bottom:30px;
	margin-top:60px;
}

.impressum p{
	font-family: Roboto, sans-serif;
	font-weight:300;
	    line-height: 150%;
	margin-bottom:15px;
}

.impressum-inhalt{
	max-width:720px;
}

.kontakt-button-container{
	width:100%;
	display:flex;
	align-items:center;
	justify-content: center;
	margin-top:60px;
	margin-bottom:60px;
}

.kontakt-button-container a, .impressum a{
	text-decoration: none;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    color: #04212B;
}

.kontakt-button-container a{
	text-transform:uppercase;
	
}

.kontakt-button-container a:hover, .impressum a:hover{
			color:#36BCD0;
		transition: color .25s ease-in-out;
}

/* IMPRESSUM */

/* DATENSCHUTZ */

.datenschutz{
	margin-top:100px;
}

.datenschutz-inhalt h1{
	width:100%;
	text-align: center;
	font-size:36px;
	text-transform: uppercase;
	margin-top:120px;
}

.datenschutz h1, h2, h3, h4, li, p, a{
	font-family: Roboto, sans-serif;
}

.datenschutz h2{
	text-transform: uppercase;
	text-align: left;
	margin-bottom:30px;
	margin-top:60px;
}

.datenschutz p{
	font-family: Roboto, sans-serif;
	font-weight:300;
	    line-height: 150%;
	margin-bottom:15px;
}

.datenschutz-inhalt{
	max-width:720px;
}



.datenschutz a{
	text-decoration: none;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    color: #04212B;
}



.datenschutz a:hover{
		color:#36BCD0;
		transition: color .25s ease-in-out;
}

.datenschutz .title-text .title-text-p{
	font-size: 40px;
}

.datenschutz h3{
	margin-bottom:15px;
}

.datenschutz h4{
	margin-bottom:5px;
}

.datenschutz li{
	margin-left:30px;
	margin-bottom:5px;
	padding-left:10px;
}

.datenschutz ul{
	margin-bottom:30px;
}

.datenschutz li::marker{
margin-right:15px !important;
}

/* DATENSCHUTZ */


@media (max-width: 520px) {
	
	#leistungen h2{

	}
	
	.leistung-box{
		width:100%;
		flex-direction: column;
	}
	.leistung-icon {
		width:100%;
		margin-right:0px;
		display:flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}
	.leistung-text h3 {
		max-width:500px;
		text-align: center;
	}
	.referenz-fotos{
		flex-direction: column;
	}
	.referenz-before img, .referenz-after img{
		width:100%;
	}
	.kontakt-wrapper, .dse-imp-wrapper{
		flex-direction: column;
	}
	.kontakt-foto{
		align-items:center;
		justify-content: center;
		margin-bottom:30px;
				
	}
	.kontakt-foto-img{
		margin-right:0px;
	}
	.dse-imp-wrapper a:first-child{
		margin-right:0px;
		margin-bottom:30px;
	}
	.footer-info{
		text-align: center;
	}
	.datenschutz-inhalt h1{
		font-size:24px;
		margin-top:30px;
	}
		.impressum-inhalt h1{
		font-size:24px;
		margin-top:30px;
	}
	.referenz-before p, .referenz-after p{
		width: calc(100% - 30px);
	}
}