@font-face { font-family: OpenSans; font-style:normal; font-weight: 400; font-stretch:100%; src: url('webfonts/OpenSans-Regular.ttf'); font-display:swap;}
@font-face { font-family: OpenSans; font-style:bold; font-weight: 600; font-stretch:100%; src: url('webfonts/OpenSans-SemiBold.ttf'); font-display:swap;}
html, body, .main {height: 100%; }
ul, li{ padding: 0;  margin: 0}
ul { margin: 0 0 0 30px; }
body { font-family: OpenSans; font-size:18px; line-height: 1.3em;  color: #454648; margin:0; text-align:center; overflow-x: hidden; /*Animation macht sonst horizontale Scrollbalken */} 


/*
body{ margin:0; padding: 0; color:black; background-image:url('/bilder/Katze-in-Blumen.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; font-family: OpenSans, Arial, Verdana;  overflow-y: scroll; font-size: 15px;line-height:22px;}
*/
a.btn { display:inline-block; background:  #772412; color:white; padding: 0.6em 2em; border-radius: 5px; text-decoration:none;}
a.btn.blau { background: #0d1b4a}

h1,h2,h3,h4,h5, .subline { color: #1f1f20; line-height: 1.1em;  text-align:center; font-family: OpenSans; font-weight:bold;}
.overlay {background: hsl(0deg 0% 0% / 55%); padding: 20px 30px; }
.overlay h1 {text-transform: uppercase; color: white;  margin:0; padding:0; text-align:left}
.schmaler h2 {margin-top:4.5em; }
h1 {font-size: 24px; }
h2 {font-size: 24px; text-transform: uppercase;  margin: 2.9em  0 1.8em}
h3 { font-size:20px; margin: 0  0 2.3em}
.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:center; font-size:18px;  font-weight:normal;}
.head .overlay .subline  {text-align: left;}
img {max-width:100%;height:auto;}
strong { font: 700 19px 'Open Sans', sans-serif; }
a { color:#772412; font-weight:bold; text-decoration:none;}
td {vertical-align:top; }
p { margin:25px 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}
.top4em {margin-top: 4em !important; }
.top3em {margin-top: 3em !important; }
.top2em {margin-top: 2em !important }
.block {display:block; margin: 10px auto 0px; float:none;} 
.noList { list-style-type: none; margin: 0; padding: 0}
.grey{padding:4em 0; background: #efefef }
.fontRed {color: #772412; }
.grey.unten , .unten{ margin: 7em 0 0; padding:2em}
.nowrap {white-space: nowrap}
.bg-grau { background:#efefef;}

header { height: 100px; background: rgb(237 237 237 / 70%);}
header .wrapper {margin: 0; padding: 0; position:relative;}
#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: white; padding:0 0 150px; text-align:left;}
.nav li:hover {background: #772412; }
.nav li:hover a {color: white;}
.nav a {display:block; font-size:20px; border-bottom: 1px solid #454648; padding: 20px 0 20px 50px; color: #454648 }
.nav #menuClose { font-size: 30px; color: #772412; font-weight:bold; margin:38px 34px; text-align: right;}

.imgWithOverlay .wrapper, #footer .wrapper{margin:0; }
.imgWithOverlay.head { position:relative; }
.head .overlay {top: calc(50% - 1.6em);    position: absolute;} 
.head {  margin-top:-100px; z-index:-1; height:100vh; position: relative; background-position: center bottom;  background-repeat: no-repeat;  background-size: cover; }
.overlay h2, .overlay h4, .overlay .subline { margin:0; color:white }

#footer { text-align:center;  padding:0.5em; background: #0d1b4a ; color:white; font-size: 12px;}
#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: #772412;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: #efefef; border: 2px solid #0d1b4a; border-radius: 5px; margin: 4em 0 2em; padding-bottom: 1em; position:relative;}
.box2.mitBtn .box, .box3.mitBtn .box  {     padding: 10px 10px 4em; }
.box2 .box img, .box3 .box img { margin-top: -45px;}


.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%;  border: 1px solid rgb(217 217 217);  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%; border: 1px solid rgb(217 217 217);}
#team .referenzen3er li {border:0}
.referenzen3er.partner li  {margin: 5% 0; }
.referenzen3er li a,  .refTop a { color: #454648; font-weight:normal;}
.referenzen3er li p, .refTop p { margin: 0.5em 1.3em 0.8em;}

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

.bewertung { margin: 2 1em; text-align:left; }
.wback { background: white; padding-top:3em  }

.spalten2 div { text-align:left; }
.spalten2 h3, .spalten2 h4 { margin: 3em 0 1em; text-align:left;}
.headlineMobNot, .mob-not {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;}
.einzelRef .referenzen3er li  {border: 0}
.unterschrift { width: 260px; float:right; margin-top:1.1em;}
.refNavi {margin: 5em 0 7em;}
.refNavi .btn { background: #838383;  font-size: 14px;  }
.refNavi img {height: 2.5em;  margin: -4px -10px 0 -6px;}
.refNavi img.left {margin: -4px -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:white; padding: 5px; width: 250px; background: #772412;}
.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}
.projekte .bg-grau span { display: inline-block; margin: 10px 10px 20px 20px;}
.projekte .spalten {margin-top: 3rem }
.projekte .spalten p { text-align: justify;}
 
 
@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%}
	.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){ 
	body {font-size: 20px; }
	.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; }
	.imgWithOverlay { position:relative; }
	.overlay {top: calc(50% - 6.1em); position:absolute;} 
	.geoSmart .overlay { top: calc(50% - 4.5em);}
	.referenzen3er { display: flex; flex-wrap: wrap;  justify-content: center; }
	.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 }
	
}

@media all and (min-width:990px){ 
	p {max-width: 666px; }
	.wrapper{ padding: 30px; margin: 0 auto;}
	.imgWithOverlay .wrapper { padding: 0;}
	/* .nav #menuClose {margin-right: 42px;} */
	#menu { margin-right: 30px; }
	#footer .copyright { margin:0; }
	#footer .navi { float:right; }
	.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%}
	.referenzen3er.partner li  {margin: 3%; width:27%}
	.refTop {width:30%}
	.head {background-attachment: fixed;}
	@supports (-webkit-touch-callout: none){
		.head {background-attachment: scroll;}
	}
	.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, .mob-not {display: block; }
	.bewertung { margin: 3em 6em; }
	.wrapper.schmaler  {max-width:1000px;}
	.breite-ein-drittel { flex: 0 1 calc((100% - 200px) / 3) !important; }
}

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