@charset "UTF-8";
/* CSS Document */

/* Global Settings */

body {
	margin:0;
	padding:0;
	font-size:16px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior:smooth;
	background-color:#fff;
}

a,
a:link,
a:visited,
a:hover,
a:focus {
	text-decoration:none;
	outline:none;
	transition:all 0.2s;
	border-bottom:1px solid #516FA3;
	color:#000;
}

a:hover {
	color:#4d6389;
}

.mainframe {
	width:100%;
	max-width:1260px;
	margin:auto;
	height:auto;
}

.clearer {
	clear:both;
}

h1 {
	font-size:3.5rem;
	color:#4d6389;
	font-family:"Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin-top:0;
}

h2 {
	font-size:2.2rem;
	color:#444;
	font-family:"Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin-top:-20px;
	margin-bottom:30px;
}

h3 {
	font-size:2.2rem;
	color:#4d6389;
	font-family:"Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin-top:0;
}

h3::after {
	content:'';
	position:absolute;
	width:70px;
	height:5px;
	border-bottom:2px solid #4d6389;
	display:block;
	padding-top:5px;
}

h4 {
	font-size:1.5rem;
	color:#444;
	margin-top:-5px;
}

h5 {
	font-size:1.3rem;
	margin-top:0;
	margin-bottom:10px;
	color:#ddd;
}

.buttons-unten {
	position:fixed;
	bottom:0;
	right:0;
	z-index:5;
}

.button-anrufen {
	width:50px;
	height:50px;
	float:left;
	background-color:#444;
	text-align:center;
	margin-left:2px;
	box-sizing:border-box;
	box-shadow:0px 0px 20px rgba(0,0,0,0.35);
	transition:all 0.2s;
}

.button-anrufen img {
	width:auto;
	height:35px;
	padding-top:8px;
}

.button-anrufen:hover {
	background-color:#333;
	transition:all 0.2s;
	height:58px;
	margin-top:-8px;
}

.button-mail {
	width:50px;
	height:50px;
	float:left;
	background-color:#444;
	text-align:center;
	margin-left:2px;
	box-sizing:border-box;
	box-shadow:0px 0px 20px rgba(0,0,0,0.35);
	transition:all 0.2s;
}

.button-mail img {
	width:33px;
	height:auto;
	padding-top:9px;
}

.button-mail:hover {
	background-color:#333;
	transition:all 0.2s;
	height:58px;
	margin-top:-8px;
}

.parallax_section{
	height: 800px;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: 100% auto;
	position:relative;
}

.parallax_image_first{
	 background-image: url("../images/bilder/erb-bild-1.jpg");
}

.parallax-window {
    min-height: 600px;
    background: transparent;
}


/* Ende Global Settings */


/* Header */

header {
	width:100%;
	height:auto;
	overflow:hidden;
}

.rundung {
	width:100%;
	height:220px;
	background-image:url(../images/SVG/rundung.svg);
	background-size:cover;
	background-position:bottom;
	background-repeat:no-repeat;
	position:fixed;
	transition:all 0.2s;
	z-index:3;
}

.rundung.fixed {
	height:90px;
	animation-name:head;
	animation-duration:0.7s;
	transition:all 0.2s;
	background-color:#fff;
	box-shadow:0px 20px 40px rgba(0,0,0,0.1);
}

@keyframes head {
	from {height:230px;background-image:url(../images/SVG/rundung.svg);}
	50% {background-image:url(../images/SVG/rundung.svg);}
	to {height:90px; background-image:none; background-color:#fff;}
}

.rundung.fixed nav .navigation {
	padding-top:30px;
	transition:all 0.2s;
}

.rundung.fixed nav .logo {
	padding-top:16px;
	width:170px;
	transition:all 0.2s;
}

.logo {
	width:300px;
	padding-top:30px;
	float:left;
	transition:all 0.2s;
}

.logo img {
	width:100%;
	height:auto;
}

.navigation {
	width:auto;
	height:auto;
	float:right;
	padding-top:60px;
	transition:all 0.2s;
}

.navigation a {
	color:#333;
	font-size:1.1rem;
	margin-left:40px;
	padding-bottom:5px;
	border-bottom:2px solid transparent;
}

.navigation a:hover {
	color:#4d6389;
	padding-bottom:5px;
	border-bottom:2px solid #516FA3;
}

.navigation-m {
	position:fixed;
	right:0;
	margin-top:13px;
	transition:all 0.2s;
	display:none;
	padding-right:5%;
	margin-right:-20px;
}

.burger-menu {
	width:auto;
	height:auto;
	padding:20px;
	transition:all 0.2s;
}

.burger-bar {
	width:32px;
	height:2px;
	background-color:#000;
	margin-bottom:7px;
	transition:all 0.2s;
}

.burger-bar-mid {
	width:32px;
	height:2px;
	background-color:#000;
	margin-bottom:7px;
	transition:all 0.2s;
}

.navigation-m-box {
	width:100%;
	position:fixed;
	height:auto;
	display:none;
	transition:all 0.2s;
	animation-name:nav2;
	animation-duration:0.5s;
	z-index:999
}

.navigation-m-box:target {
	display:block;
	animation-name:nav;
	animation-duration:0.5s;
	transition:all 0.2s;
}

.navigation-m-box:target+.mainmainframe {
	filter:blur(15px);
}

@keyframes nav {
	from {opacity:0; margin-top:-100px;}
	to {}
}

.navigation-m-box a {
	width:100%;
	height:auto;
	float:left;
	border-bottom:1px solid #F0F0F0;
	padding:8px 0px 10px 5%;
	background-color:#fff;
}

.navigation-m-box a:last-of-type {
	border-bottom:none;
}

.navigation-m-box a:hover {
	background-color:#eee;
}

.nav-img {
	width:101%;
	margin-top:-1px;
}

.close-btn {
	font-size:2rem;
	margin-top:-5px;
	text-align:center;
	padding-left:0!important;
	width:100%;
	float:none;
	margin-left:-5%;
}

/* Ende Header */


/* Section */

section#start {
	width:100%;
	height:930px;
	box-sizing:border-box;
}

.slideshow-head {
	width:100%;
	height:930px;
	overflow:hidden;
}

.slideshow-head img {
	width:100%;
}

.text-box.head {
	position:absolute;
	top:0;
	margin-top:360px;
}

.button {
	border:1px solid #444;
	float:left;
	padding:3px 12px 6px 12px;
	transition:all 0.2s;
	color:#333;
	margin-top:10px;
	box-shadow:0px 0px 20px #fff;
}

.button:hover {
	background-color:#444;
	color:#fff;
}

.button-down {
	width:110px;
	position:absolute;
	bottom:0;
	margin:auto;
	margin-bottom:20px;
	left:0;
	right:0;
	padding:20px;
	transition:all 0.2s;
}

.button-down img {
	width:100%;
	height:auto;
}

.button-down:hover {
	animation-name:down;
	animation-duration:1s;
	transition:all 0.2s;
}

@keyframes down {
	from {}
	50% {margin-bottom:-5px; padding-top:35px}
	to {}
}

section.historie {
	width:100%;
	height:auto;
	padding-top:50px;
	padding-bottom:70px;
	background-color:#333333;
	box-sizing:border-box;
	color:#fff;
}

.historie-left {
	width:62%;
	margin-right:8%;
	float:left;
	box-sizing:border-box;
	position:relative;
}

.historie-right {
	float:left;
	width:30%;
	height:auto;
	box-sizing:border-box;
	margin-top:-65px;
	box-shadow:0px 20px 40px rgba(0,0,0,0.3);
	overflow:hidden;
}

.historie-right img {
	width:105%;
	height:auto;
	margin-bottom:-5px;
	margin-left:-5%;
}

.box-left {
	height:auto;
	width:48%;
	padding:20px 30px;
	box-sizing:border-box;
	background-color:#444;
	position:relative;
	margin-right:2%;
	margin-top:20px;
	margin-bottom:20px;
}

.box-left::after {
	content:'';
	position:absolute;
	width:30px;
	height:30px;
	background-color:#444;
	right:-9px;
	top:21px;
	transform:rotate(45deg);
}

.box-left.show {
	display:none;
}

.box-right {
	height:auto;
	width:47.8%;
	padding:20px 30px;
	box-sizing:border-box;
	background-color:#444;
	float:right;
	margin-top:20px;
	margin-bottom:20px;
	position:relative;
	margin-left:2%;
}

.box-right::before {
	content:'';
	position:absolute;
	width:30px;
	height:30px;
	background-color:#444;
	left:-9px;
	top:21px;
	transform:rotate(45deg);
}

.historie-left::after {
	content:'';
	position:absolute;
	width:2px;
	height:100%;
	background-color:#4d6389;
	top:0;
	left:50%;
}

@media (max-width:1155px) {
	.box-right {
		width:47%;
	}
}

@media (max-width:1060px) {
	.box-left {
		width:47.4%;
	}
	
	.historie-right {
		margin-top:40px;
	}
}

@media (max-width:900px) {
	.historie-left {
		width:100%;
	}
	
	.historie-right {
		width:50%;
		text-align:center;
		margin-top:50px;
		height:350px;
		margin-left:25%;
		margin-bottom:50px;
		
	}
	
	.historie-right img {
		margin-top:-150px;
	}
	
	section.historie {
		padding-bottom:30px;
	}
	
	.box-left {
		width:48%;
	}
	
	.box-right {
		width:47.5%
	}
}

@media (max-width:780px) {
	.historie-right img {
		margin-top:-80px;
	}
}

@media (max-width:670px) {
	.historie-right {
		width:100%;
		margin-left:0;
	}
	
	.historie-right img {
		margin-top:-320px;
	}
	
	.historie-left::after {
		left:100%;
	}
	
	.box-right {
		display:none;
	}
	
	.box-left.show {
		display:block;
	}
	
	.box-left {
		width:97.5%;
	}
}

@media (max-width:590px) {
	.historie-right img {
		margin-top:-250px;
	}
}

@media (max-width:530px) {
	.box-left {
		width:96.5%;
	}
}

@media (max-width:485px) {
	.historie-right img {
		margin-top:-170px;
	}
}

@media (max-width:405px) {
	.historie-right img {
		margin-top:-100px;
	}
}

@media (max-width:400px) {
	.box-left {
		width:95.5%;
	}
}

@media (max-width:355px) {
	.historie-right img {
		margin-top:-70px;
	}
}

section.leistungen {
	width:100%;
	height:auto;
	padding-top:50px;
	padding-bottom:60px;
	background-color:#fff;
	box-sizing:border-box;
}

.leistungen-left {
	width:48%;
	float:left;
	margin-right:2%;
}

.leistungen-right {
	width:46%;
	float:left;
	margin-left:4%;
}

.table-head {
	background-color:#586D91;
	font-weight:bold;
}

@media (max-width:768px) {
	.leistungen-left {
		width:100%;
		margin-right:0;
		margin-bottom:50px;
	}
	
	.leistungen-right {
		width:100%;
		margin-left:0;
	}
}

section.referenzen {
	width:100%;
	height:auto;
	padding-top:50px;
	padding-bottom:20px;
	background-color:#fff;
	box-sizing:border-box;
}

.text-box.left {
	margin-left:-18px;
}

.firmenlogo {
	width:20%;
	height:auto;
	padding-left:20px;
	padding-right:20px;
	box-sizing:border-box;
	float:left;
	margin-bottom:45px;
	transition:all 0.2s;
}

.firmenlogo:hover .logo-bild {
	opacity:0.7;
	transition:all 0.2s;
}

.logo-bild {
	width:100%;
	height:auto;
	transition:all 0.2s;
	text-align:center;
}

.logo-bild img {
	width:90%!important;
	height:auto;
	margin-left:5%;
	margin-right:5%;
}

.logo-name {
	width:100%;
	text-align:center;
	font-weight:bold;
	transition:all 0.2s;
}

.logo-beschreibung {
	width:100%;
	text-align:center;
	color:#4d6389;
	transition:all 0.2s;
}

@media (max-width:1150px) {
	.firmenlogo {
		width:25%;
	}
}

@media (max-width:890px) {
	.firmenlogo {
		width:33.3333334%;
	}
}

@media (max-width:610px) {
	.firmenlogo {
		width:50%;
	}
	
	.firmenlogo.two {
		padding-right:0;
		width:48%;
		margin-left:2%;
		height:auto;
	}
	
	.firmenlogo img {
		margin-left:0;
		margin-right:0;
	}
	
	.logo-beschreibung {
		font-size:0.7rem;
	}
}

section.kontakt {
	width:100%;
	height:auto;
	padding-top:50px;
	padding-bottom:80px;
	background-color:#fff;
	box-sizing:border-box;
	font-size:1.1rem;
}

.kontakt-left {
	width:80%;
	float:left;
	box-sizing:border-box;
}

.kontakt-right {
	float:left;
	width:50%;
	box-sizing:border-box;
	text-align:right;
}

.map {
	width:100%;
	height:320px;
	float:right;
	box-shadow:0px 20px 40px rgba(0,0,0,0.2);
	margin-top:-70px;
}

.map iframe {
	width:100%;
	height:100%;
}

.abstand-bild {
	width:100%;
	height:400px;
	overflow:hidden;
}

.abstand-bild img {
	width:100%;
	margin-top:-250px;
}

.column {
	column-count:2;
	column-gap:27px;
}

#leistungen {
	position:absolute;
	margin-top:-100px;
}

#historie {
	position:absolute;
	margin-top:-100px;
}

#referenzen {
	position:absolute;
	margin-top:-100px;
}

#kontakt {
	position:absolute;
	margin-top:-100px;
}

/* Ende Section */


/* Footer */

footer {
	width:100%;
	height:140px;
	background-color:#333;
	color:#fff;
}

.logo-footer {
	width:125px;
	position:absolute;
	margin-top:-20px;
	overflow:hidden;
	height:160px;
}

.logo-footer img {
	width:100%;
	height:auto;
}

.logo-footer-klein {
	width:auto;
	position:absolute;
	margin-top:-20px;
	overflow:hidden;
	height:145px;
	display:none;
}

.logo-footer-klein img {
	width:auto;
	height:100%;
}

.sprechblase-footer {
	float: left;
	margin-left: 160px;
	height: 100px;
	width: auto;
	background-color: #CCC;
	box-sizing: border-box;
	padding: 10px 20px;
	margin-top: 20px;
	position: relative;
	unicode-bidi: #DBDBDB;
	color: #000;
}

.sprechblase-footer::before {
	content:'';
	position:absolute;
	width:30px;
	height:30px;
	left:-9px;
	top:21px;
	transform:rotate(45deg);
	background-color:#ccc;
}

.logos-footer {
	width:auto;
	height:auto;
}

.zvo {
	width:80px;
	float:left;
	margin-right:20px;
}

.zvo img {
	width:100%;
}

.hapoc {
	width:80px;
	float:left;
	margin-right:20px;
	padding-top:3px;
}

.hapoc img {
	width:100%;
}

.vecco {
	width:80px;
	float:left;
	padding-top:8px;
}

.vecco img {
	width:100%;
}

.impressum-datenschutz {
	float:right;
	padding-top:33px;
}

.impressum-datenschutz a {
	color:#fff;
	border:none;
}

.impressum-datenschutz a:hover {
	color:#777;
}

.impressum {
	margin-right:15px;
}

small {
	font-size: 0.8em;
	
	}

/* Ende Footer */

@media (max-width:1405px) {
	.slideshow-head {
		width:120%;
		margin-left:-10%;
	}
	
	section#start {
		overflow:hidden;
	}
}

@media (max-width:1310px) {
	.mainframe {
		width:100%;
		padding-left:5%;
		padding-right:5%;
		box-sizing:border-box;
	}
}

@media (max-width:1170px) {
	.slideshow-head {
		width:140%;
		margin-left:-20%;
	}
}

@media (max-width:1024px) {
	section#start {
		height:750px;
		overflow:hidden;
	}
	
	.button-down {
		opacity:0!important;
		padding-bottom:200px;
		z-index:-1;
		width:0!important;
	}
}

@media (max-width:980px) {
	.abstand-bild img {
		width:100%;
		margin-top:-50px;
	}
	
	h1 {
		text-shadow:0px 0px 10px #fff!important;
	}
	
	h2 {
		text-shadow:0px 0px 10px #fff!important;
	}
}

@media (max-width:915px) {
	.column {
		column-count:1;
	}
}

@media (max-width:890px) {
	.navigation {
		display:none;
	}
	
	.rundung {
		height:200px;
	}
	
	.logo {
		padding-top:20px;
	}
	
	.navigation-m {
		display:block;
	}
}

@media (max-width:810px) {
	.slideshow-head {
		width:150%;
		margin-left:-30%;
	}
}

@media (max-width:768px) {
	footer {
		height:170px;
	}
	
	.logo-footer {
		margin-top:10px;
	}
	
	.impressum-datenschutz {
		text-align:right;
		width:125px;
		padding-top:11px;
	}
	
	.impressum {
		width:100%;
		margin-right:0;
	}
	
	.rundung {
		height:150px;
	}
	
	.rundung.fixed {
		height:70px;
		animation-name:head2;
		animation-duration:0.5s;
	}
	
	.logo {
		width:200px;
	}
	
	.rundung.fixed nav .logo {
		width:120px;
	}
	
	section#start {
		height:500px;
	}
	
	.text-box.head {
		margin-top:300px;
	}
	
	.button-down {
		width:60px;
		margin-bottom:50px;
	}
	
	h1 {
		font-size:3rem;
	}
	
	h2 {
		font-size:1.5rem;
	}
	
	.text-box.head {
		margin-top:200px;
	}
	
	.navigation-m {
		margin-top:4px;
	}
}

@keyframes head2 {
	from {height:150px;background-image:url(../images/SVG/rundung.svg);}
	50% {background-image:url(../images/SVG/rundung.svg);}
	to {height:70px; background-image:none; background-color:#fff;}
}

@media (max-width:720px) {
	.kontakt-left {
		width:100%;
	}
	
	.kontakt-right {
		width:100%;
	}
	
	.map {
		margin-top:60px;
	}
}

@media (max-width:678px) {
	.abstand-bild img {
		width:140%;
	}
	
	footer {
		height:300px;
	}
	
	.logo-footer {
		display:none;
	}
	
	.logo-footer-klein {
		display:block;
	}
	
	.sprechblase-footer {
		margin-left:0;
		margin-top:165px;
	}
	
	.sprechblase-footer::before {
		top:-12px;
		left:39px;
		width:25px;
		height:25px;
	}
	
	.impressum-datenschutz {
		padding-top:20px;
	}
}

@media (max-width:520px) {
	.slideshow-head {
		width:200%;
		margin-left:-60%;
	}
}

@media (max-width:500px) {
	.buttons-unten {
		width:100%;
	}
	
	.button-anrufen {
		width:49.25%;
		margin-left:0.5%;
		margin-right:0.25%;
		height:40px;
	}
	
	.button-anrufen img {
		height:30px;
		padding-top:6px;
	}
	
	.button-anrufen:hover {
		height:48px;
		margin-top:-8px;
	}
	
	.button-mail {
		width:49.25%;
		margin-left:0.25%;
		margin-right:0.5%;
		height:40px;
	}
	
	.button-mail img {
		padding-top:4px;
	}
	
	.button-mail:hover {
		height:48px;
		margin-top:-8px;
	}
	
	.abstand-bild img {
		width:auto;
		height:400px;
		margin-top:0;
		margin-left:-100px;
	}
}

@media (max-width:495px) {
	footer {
		height:330px;
	}
	
	.impressum-datenschutz {
		margin-top:-270px;
	}
}

@media (max-width:420px) {
	h1 {
		font-size:2.2rem;
	}
	
	h2 {
		font-size:1.3rem;
		text-shadow:0px 0px 10px #fff;
	}
}

@media (max-width:380px) {
	.slideshow-head {
		width:240%;
		margin-left:-80%;
	}
}

@media (max-width:355px) {
	.zvo {
		width:29%;
		padding:0 2.16666667%;
		margin-right:0;
	}
	
	.hapoc {
		width:29%;
		padding:0 2.16666667%;
		margin-right:0;
		padding-top:3px;
	}
	
	.vecco {
		width:29%;
		padding:0 2.16666667%;
		margin-right:0;
		padding-top:5px;
	}
}