/*  
	Farben
	Grün aus Logo: #47682f  
	Gelb aus Logo: #f5b808  
	Schwarz: #1f1f20
	Grau: #5f5f62
	Grau dunkel: #454648
	Grau hell: #efefef
	Orange Pastell: #f0e2c3
 */
html, body, .main {height: 100%; }
html { scroll-behavior: smooth; }
ul, li{ padding: 0;  margin: 0}
ul { margin: 0 0 0 30px; }
body { font-family: Arial; font-size:16px; line-height: 1.3em;  color: #5f5f62; margin:0; text-align:center; background:white; overflow-x: hidden; /*Animation macht sonst horizontale Scrollbalken */} 
.btn { display:inline-block; color:#47682f; padding: 0.6em 2em; border: 2px solid #5d763d; border-radius: 5px; text-decoration:none; font-weight:normal;}
a.btn.blau { background: #0d1b4a}
h1,h2,h3,h4,h5, .subline { color: #47682f; line-height: 1.1em;  text-align:center; font-weight:normal;}
.overlay {background:  #f0e2c3;/*hsl(0deg 0% 100% / 90%);*/ padding: 20px 30px; }
.overlay h1 {text-transform: uppercase; color: white;  margin:0; padding:0; text-align:left}
h1 {font-size: 24px; }
h2 {font-size: 24px; text-transform: uppercase;  margin: 2.9em  0 0}
h3 { font-size:20px; margin: 0 }
.schmaler h3 { margin: 3em 0 1.5em; }
h4 {font-size:18px; text-transform: uppercase; }
h5 {font-size:16px; }
.spalten h4 {margin: 3em 0 1em;}
.txtSmaller { font-size:14px; }
sup {font-size: 0.6em; margin-top: -9px;  display: inline-block;}
.overlay .subline { padding-top:11px; text-align:left; font-size:18px;  font-weight:normal;}
.head .overlay .subline  {text-align: left;}
img {max-width:100%;height:auto;}
strong { font-weight: bold; color:#47682f}
a { color:#47682f; font-weight:bold; text-decoration:none;}
td {vertical-align:top; }
p { margin:1.5em auto}

.right{ float:right; }
.left { float:left; }
.aright{ text-align:right; }
.aleft { text-align:left; }
.center { text-align:center; }
.clear { clear:both;}
.wrapper {margin: 0 7.5%; min-height:100%}
.wrapper1300 { margin: 0;}
.schmaler div, .schmaler p { text-align:left }
.bold { font-weight:bold}
.top10em {margin-top: 9.5em !important; }  /* 150px */
.top5em {margin-top: 5em !important; }		/* 100px */
.top4-5em {margin-top: 4.5em !important; }
.top4em {margin-top: 4em !important; }		
.top3em {margin-top: 3em !important; }      /* 60px */
.top2em {margin-top: 2em !important }
.top1-5em {margin-top: 1.5em !important}  /* 30px */
.block {display:block; margin: 10px auto 0px; float:none;} 
.noList { list-style-type: none; margin: 0; padding: 0}
.green {color: #47682f}
.yellow {color: #f5b808}

.black {color: #1f1f20 /* 0 */}
.grey {color: #5f5f62 /* 0 */ }
.grauDunkel{ color: #454648 /* 0 */ }
.grauHell { #efefef /* 0 */}
.beige {color: #f0e2c3 }
.beigeBlock { margin: 5em 0 0; padding: 1px 0; background: #f0e2c3}
.nowrap {white-space: nowrap}
.fontBigger { font-size:20px }
.fwNormal {font-weight:normal;}

header { height: 100px; position:fixed; top:0;left:0; right:0; background-color:white;}
header .wrapper {margin: 0; padding: 0; position:relative;}
#arbeitszimmer .wrapper { min-height:auto}
#kontakt header, #datenschutz header, #impressum header, #arbeitszimmer header , #karriere header{ position: static}
#logo {position:relative; z-index:1;  text-align:center; top:10px; max-width: 160px; margin:0 auto;}
#logo a { text-decoration:none; color: #45a5bf;}
#menu {margin-top:40px; margin-right: 30px; cursor: pointer;}
/* #menu {margin-top:40px; margin-right: calc(20px - 7.5%); cursor: pointer;} */
#navi {text-align:right; margin-right: 30px;}
#navi a {text-decoration:none; }
.nav { display:none;	position: absolute; z-index: 10; width: 300px; right: 0px; top: 0px; background: #f0e2c3; padding:0 0 150px; text-align:left;}
.nav li:hover {background: #47682f; }
.nav li:hover a {color: white;}
.nav a {display:block; font-size:20px; border-bottom: 1px solid #1f1f20; padding: 20px 0 20px 50px; color: #1f1f20; font-weight:normal; text-transform:uppercase; }
.nav #menuClose { font-size: 30px; color: #f5b808; font-weight:bold; margin:38px 34px; text-align: right;}

.imgOverlay { position: initial;top: 0; right: 0; left: 0; bottom: 0; }
.imgOverlay div { height: 100%; width: 100%; z-index: -2; position: absolute;background-position: center bottom;  background-repeat: no-repeat;  background-size: cover; }
.textOverlay { position: fixed; top: 35%; left:5%; z-index: -1;}
#leistungen .textOverlay, #unternehmen .textOverlay  {top:43%; }
.textOverlay .wrapper, #footer .wrapper{margin:0; }

.head { z-index:-1; height:100vh ; }
.overlay h2, .overlay h4 { margin:0; color:white }
.prallax02 {top:100px;}

#footer { text-align:center;  padding:1em 0.5em; background: #47682f ; color:white; font-size: 14px;}
#footer .navi  {text-align:right;}
#footer a {text-decoration:none; font-weight:normal; color: white; margin: 0 1em; display:block; max-width:100%;}

.scrollup { width: 44px; height: 40px; position: fixed; bottom: 60px; left: 10px; display: none; background-color: #47682f;border:1px solid rgb(120,120,120);color:black; border-radius:44px; font-size:30px;     text-decoration: none; text-align: center; padding-top: 4px;     font-family: Arial; font-style: initial; }
.scrollup a { position: relative; margin-top: 4px; display: block; color: white; }

.box2 .box, .box3 .box { background: #f0e2c3; border: 2px solid #5d763d; border-radius: 5px; margin: 4em auto 2em; padding-bottom: 1em; position:relative;}
.box2.mitBtn .box, .box3.mitBtn .box  {     padding: 0 0 4em; }
.box2 h3 { margin:50px 0}
.box2 p { margin-bottom:30px}

.box3 .box.rot { border-color: #772412} 
.box2 .box {margin-top:4em}
.box2 ul {text-align:left;  padding: 0 3em 25px;  }

.refTop {margin: 2% auto; padding:0; width:90%;  text-align:left; background:white; }
.refTop.grey { background: #efefef}
.referenzen3er { display: flex; flex-wrap: wrap;  justify-content: center; }
.referenzen3er li {  background: white; text-align:left; float:left; margin: 2%; padding:0; width:90%; }
.referenzen3er li a,  .refTop a { color: #454648; font-weight:normal;}
.referenzen3er li p, .refTop p { margin: 0.5em 1.3em 0.8em;}
#projekte .referenzen3er { font-size:20px;}
#projekte .referenzen3er li p{ margin: 25px 1.3em 30px;}

.referenzen3er.leistungen li { background-color: #f0e2c3; border: 3px solid #47682f; border-radius: 7px; text-align:center;  }
.referenzen3er.leistungen li a {color: #47682f; font-size:20px}
.referenzen3er.leistungen li p {margin: 0.5em; height: 90px;  display: table-cell; vertical-align:middle; }

.referenzen3er.galerie {margin-top: 4em; }
.referenzen3er.galerie li {margin:0; width:100%}
#referenzen .referenzen3er li {background:#efefef;}

.bewertung { margin: 100px 0 150px; text-align:left;  }

.wback { background: white; padding-top:2.5em ;}

.spalten2 div { text-align:left; }
.spalten2 h3, .spalten2 h4 { margin: 3em 0 1em; text-align:left;}
.headlineMobNot {display: none; }

.mehrErfahren {  position: absolute;  left: 0; right: 0;  text-align: center;  bottom: 0;}

.fade-from-left, .fade-from-right, .fade-in  { visibility: hidden; opacity:0; }
.erreicht.fade-from-left{   animation: move-from-left 1s forwards;}
.projektDetail header {position: static}
.projektDetail h1 {text-align:left; margin: 130px 0 80px}
.projektDetail h1 span{ background-color: #f0e2c3; padding:30px; font-weight:bold; text-transform:uppercase; display: inline-block; }
.projektDetail .referenzen3er li  {border: 0}
.unterschrift { width: 260px; float:right; margin-bottom:50px; text-align:right;    margin: 20px 0px 50px}
.refNavi {margin: 5em 0 7em;}
.refNavi .btn { background: #f0e2c3;  font-size: 14px; padding: 7px 10px 0; }
.refNavi img {height: 2.5em;  margin: -7px -10px 0 -6px;}
.refNavi img.left {margin: -7px -6px 0 -10px;}

.desk150mobTop100{  margin: 100px 0 150px }
.spalten2 div:nth-child(2) {margin-top: 50px; }
.spalten2.timeline h4 {margin: 0.1em 0 0.8em}
.spalten2.timeline td:first-child { width: 100px }

input[type="checkbox"] {margin-right:27px;}
input[type="text"], input[type="email"], textarea {width:100%; background:#fcfcfc; border:1px solid #e0e0e0;  padding: 11px; font-size: 20px; }
div.label{ font-weight:bold; }
div.field {margin: 0.2em 0 1.5em; }
div.field.moreMargin {margin: 0.2em 0 2.5em; }
.submit {font-size: 20px; color:#47682f  ; padding: 5px; width: 250px; background: #f0e2c3;border: 2px solid #47682f; text-align:center;}
.kleinesLogo {width:40%}

#cookie-overlay {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 8000; background-color: rgba(0,0,0,0.5);     display: flex; justify-content: space-around; align-items: center;}
#cookie-popup {  text-align:left; background: #fff;  font-size:14px;   line-height:20px;  padding: 20px;  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); left:5%; top: 5%;right: 5%; z-index: 9000;  color:black;}
 #cookie-popup.hidden, #cookie-overlay.hidden { display: none;}
 #cookie-popup button { padding: 15px; background-color: green; color:white;border:rgb(230,230,230); margin:5px}
 .cookieText { max-height:30vh; overflow-y:scroll; margin-bottom: 18px}
form { text-align:left; }
 
 
@keyframes move-from-left { 
  0% { transform: translateX(-100%); visibility: hidden;  opacity:0;  }
  100% { transform: translateX(0px); 	visibility: visible;  opacity: 1; }
}
.erreicht.fade-from-right{  animation: move-from-right 1s forwards; }
@keyframes move-from-right {
  0% {   transform: translateX(100%);	visibility: hidden;opacity:0;   }
  100% {  transform: translateX(0px);	visibility: visible; opacity: 1;  }
}
.erreicht.fade-in{  animation: fade-in 1.5s forwards; }
@keyframes fade-in {
  0% {  visibility: hidden; opacity:0;  }
  100% {  visibility: visible;  opacity: 1;}
}


@media all and (min-width:375px){
	#top-line .kontakt {margin-top:10px; clear:none;}
	#menu { margin-right: 30px; }
}
@media all and (min-width:400px){
	.right400 { float:right; margin: 0 0 15px 15px;}
	.left400 { float:left;margin: 0 15px 15px 0;}
}


@media all and (min-width:500px){
	.right500 { float:right; margin: 0 0 15px 15px;}
	.left500 { float:left;margin: 0 15px 15px 0;}
	.referenzen3er li { float:left; margin: 2%; width:44%}
	#projekte .referenzen3er li, #projekte .referenzen3er .refTop { margin: 5px;  width: calc(50% - 10px); }
	.referenzen3er.partner li { float:left; width:50%; margin: 3%}
	.refTop {width:44%; }
	.referenzen3er.galerie li {margin:0 0.5% 0.5%; width:49%}
}

@media all and (min-width:515px){
	.bewertung { margin: 3em; }
	#footer a {display:inline; float:none; max-width:100%; }
	.scrollup { left:auto; right: 10%}
	/*#menu { margin-right: calc(72px - 7.5%); }
	.nav #menuClose {margin-right: 85px;} */
}



@media all and (min-width:600px){ 
	.right600 { float:right; margin: 0 0 15px 15px;}
	.left600 { float:left;margin: 0 15px 15px 0;}
	.overview img {margin:0 50px 0 19% !important}
	.kleinesLogo {width:30%}
}

@media all and (min-width:600px){ 
	.referenzen3er.partner li { float:left; margin: 3%; width:44%}
}

@media all and (min-width:768px){ 
	.txtSmaller {font-size: 16px; }
	h1 {font-size: 34px;}
	.overlay h2, .overlay h4 { text-align:left; }
	h2 {font-size: 34px; }
	h3 {font-size: 28px; }
	h4, .overlay .subline {font-size: 20px; }
	h5 {font-size: 18px; }
	.overlay .subline { text-align:left; }
	.referenzen3er li p { margin: 0.5em 1.3em 0.8em;}
	.referenzen3er.galerie li {margin:0 0.5% 0.5%; width:32%}
	.desk150mobTop100{  margin-top: 150px}
	 #cookie-popup  { margin: auto 5% auto;; }
	 .cookieText {max-height:unset; overflow-y:initial }
	 .textOverlay { left: 18%;}
	 .bewertung {text-align:right;}
	
}

@media all and (min-width:990px){ 
	p {max-width: 666px; }
	.wrapper{ padding: 0 30px; margin: 0 auto;}
	.imgOverlay {position: relative ;}
	.imgOverlay div { position:fixed; height: calc(100vh - 100px); }
	.textOverlay .wrapper { padding: 0;}
	/* .nav #menuClose {margin-right: 42px;} */
	#menu { margin-right: 30px; }
	#footer .copyright { margin:0; }
	#footer .navi { float:right; }
	 .head { background-attachment: fixed; }
	 .head .overlay {position:fixed }
	 .wback { box-shadow: 0 0px 15px #b3afaf;}
	.box2, .box3, .box4 {display:flex; justify-content: center;}
	.box2 .box, .box3 .box, .box4	.box{ margin: 0 20px; padding: 10px; flex:1;}
	.wrapper.geoSmart { max-width: 1160px !important; }
	.box4, .box4 h4 {text-align: left; }
	.referenzen3er li { float:left; margin: 1%; width:30%}
	#projekte .referenzen3er li, #projekte .referenzen3er .refTop {width: calc(33% - 10px); }
	.referenzen3er.partner li  {margin: 3%; width:27%}
	.refTop {width:30%}
	.spalten2 {clear:both;}
	.spalten2 div {float:left; width: calc(50% - 3em);}
	.spalten2.timeline div{width: 100% }
	.spalten2 div:first-child { margin:0 2em 0 1em }
	.spalten2 div:nth-child(2) { margin:0 1em 0 2em }
	.spalten2 div.right { float:right; margin:0 1em 0 2em  }
	.spalten2 div.left { margin:0 2em 0 1em }
	.spalten2 div p {margin-top:0; }
	.headlineMobNot {display: block; }
	.bewertung { margin: 3em 6em;  float: right; max-width: 890px; }
	.wrapper.schmaler  {max-width:666px;}
	.unterschrift {text-align:left; margin-right:36px;}
	
}

@media all and (min-width:1100px){ 	
	.head .overlay {left:25%;}
	.spalten2.timeline div {width: calc(50% - 3em) }
	
}
@media all and (min-width:1300px){ 
	.wrapper, #footer .wrapper, .wrapper1300{ max-width: 1300px; margin: 0 auto;}
		.textOverlay { left: 24%;}
	header .wrapper { max-width: 100%; }
}


/* Prallax Effect */