@import 'fonts.css';
:root {
--mybg:url();
--mybgheight:;
--mybgbeforeheight:;
--maxwidth: 1920px;
--blue: #1e90ff;
--white: #ffffff;
--red: #ff0000;
--black:#000;
--bgbody: rgb(234,234,234);
--ontop: ;
--onright: ;
--mybgmarginbottom:;

}
* {border-radius: 0;} 
html{font-size:100%;-webkit-text-size-adjust:100%;font-variant-ligatures:none;-webkit-font-variant-ligatures:none;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
body{
max-width:var(--maxwidth);
min-height:100vh;
margin:0 auto 0 auto;
background:var(--bgbody);
font-size:1rem;
font-family:'Gruppo',sans-serif;
font-weight:400;
line-height:1.4rem;
position: relative;
overflow-x:hidden;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
}
.container-full { margin:0 auto}
p,li,li a,label { -webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale;font-size:1rem;line-height:1.5rem;font-weight:200;color:rgba(0,0,0,0.85);}
h1,h2,h3,h4,h5,h6 {font-family:'Gruppo',sans-serif;color:rgba(0,0,0,0.9);font-weight:300} 
h1{ font-size:2.2rem;line-height:2.4rem;margin:0;padding:0}
h2{ font-size:1.8rem;line-height:2rem;margin:0;padding:0}
h3 { font-size:1.6rem;}
h4 { font-size:1.2rem;}
a,a:focus,a:hover,a:active{font-size:1rem;outline: 0 !important;}
a {color:rgba(0,0,0,0.7)}
a:focus {text-decoration: none;}
a:hover {color:rgba(0,0,0,0.7);text-decoration: none;}
.clearfix{clear:both}
pre {font-family:'Gruppo',sans-serif;}
.uebersicht { font-size:1.2rem;margin-top:1rem;margin-bottom:2rem}
.uebersicht:before {content:"\f100";font-family: FontAwesome;margin-right:8px;}
.upper {text-transform:uppercase;}
.text-dark { color:rgba(0,0,0,0.9)}
.projekte {font-family:'Gruppo',sans-serif;font-size:2.2rem;line-height:2.4rem;color:rgba(0,0,0,0.9);margin:50px auto 30px auto;letter-spacing:2px;text-transform:uppercase;font-weight:300;text-align:left; }
.projekte_beschreibung{  color:rgba(0,0,0,0.9);font-weight:500; text-align:left;font-size:1.5rem;line-height:1.8rem;}
.projekte_beschreibung p { color:rgba(0,0,0,3.9);font-size:1.4rem;line-height:1.6rem;}
#content { padding:0;padding-top:10px;margin:0;background:var(--bgbody)}
#content .projekte_beschreibung p {font-size:1.2rem;line-height:1.6rem;}
#content_top{ position:absolute;position:fixed;top:0;width:100vw;min-height:200px;background: rgba(0,0,0,1);background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 1%, rgba(255,255,255,0.01) 100%);}
.projekt_titel { white-space:pre-wrap;color:#fff;font-size:1.8rem;text-transform:uppercase;letter-spacing:2px;font-weight:100;  text-align:center}
.projekt_ort {color:#fff;font-size:1rem;letter-spacing:2px;font-weight:300;  text-align:center}
.projekt_titel_header { font-weight:200;color:#666;letter-spacing:5px;padding-bottom:20px;font-size:1.8rem;text-transform:uppercase;  text-align:left}
.content_titel { font-weight:200;color:#666;letter-spacing:2px;padding-bottom:10px;font-size:1.8rem;text-transform:uppercase;  text-align:left}
.content_untertitel { font-weight:200;color:#666;letter-spacing:2px;padding-bottom:10px;font-size:1.6rem;text-align:left}
#content .content_content p {font-size:1.4rem;line-height:1.6rem;}
.projekt_untertitel { color:#fff;font-size:1.2rem; margin:0; font-weight:100;  text-align:center}
.projekt_ansehen{  color:#fff;margin:20px 0 10px 0; font-weight:100; font-size:0.9rem;text-align:center}
.projekt_beschreibung { color:#fff;font-weight:100; font-size:1rem;line-height:1.4rem;letter-spacing:1px;text-align:left}
.projekt_beschreibung p{ color:#fff;font-weight:100; font-size:1rem;line-height:1.4rem;letter-spacing:1px;text-align:left}
.projekt_titel_einzeln { background:transparent;z-index:5000;width:100vw;position:absolute;bottom:10%;letter-spacing:1px;text-align:left;max-width:100vw;padding-left:50px;font-family:'Gruppo',sans-serif;font-size:2rem;text-transform:uppercase; font-weight:100;color:#fff;}
div#contentp > p{ font-size:1.4rem;line-height:2rem;}
div#contentp  > p > a{font-size:1.4rem;line-height:2rem;}
.mw-mobile { max-width:100%}

#content-p p{ font-size:1.5rem;line-height:2rem}
hr {border-top: 1px solid rgba(0,0,0,0.1) !important;margin-bottom:20px !important;margin-top:20px !important;width:50%;}
.back-to-top {position:fixed;bottom:0;right:0;z-index: 100;width:40px;height:80px;background:#000;-moz-border-radius: 8px 0 0 0;-webkit-border-radius: 8px 0 0 0;border-radius: 8px 0 0 0;}
.back-to-top:before {color:#fff; font-family:FontAwesome;content:"\f102";font-weight:400;display: inline-block;font-size:48px;line-height:80px;width:40px; text-align:center}
#logo { z-index:10000;max-width:8rem;display:block;position:absolute;top:16px;left:30px;}
#logo img { max-width:6rem;}
.imgborder{ background:rgba(255,255,255,0.0);padding:5px}
#mybg {background: var(--bgbody) var(--mybg) no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;  -o-background-size: cover;background-size: cover;height:var(--mybgheight);width:100vw;margin-bottom:var(--mybgmarginbottom);}
#mybg:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height:var(--mybgbeforeheight);background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.2007003484987745) 100%); }
.transparent { background:transparent;border:0;}
.myblur {border-radius: 3px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(4.3px);-webkit-backdrop-filter: blur(4.3px);}
.ontop {position:absolute;top:calc(100vh - var(--ontop));right:var(--onright);}
.content-titel { color:#fff;text-align:left;font-size:2.4rem;line-height:2.4rem;margin-bottom:10px;padding:0}
#content_content > p{ color:#fff;font-size:1.4rem;line-height:1.6rem;}
#content_content > p > a {color:#fff;font-size:1.2rem;line-height:1.6rem;}


	#content .content_content h2 {font-size:1.4rem;font-weight:500;}
	#content .content_content h3 {font-size:1.2rem;font-weight:500;}
	#content .content_content p {font-size:1.1rem;line-height:1.3rem;}
	
#myInfoModal h2 {font-size:2rem;margin-bottom:0.8rem}
#myInfoModal p {font-size:1.4rem}
.modal-center {  text-align: center;  padding: 0!important;}
.modal-center:before {  content: '';  display: inline-block;  height: 100%;  vertical-align: middle;  margin-right: -4px; /* Adjusts for spacing */}
.modal-dialog-center {  width:800px;display: inline-block;  text-align: left;  vertical-align: middle;}
.modal-content{min-width:400px;-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);-moz-box-shadow: 0 5px 15px rgba(0,0,0,0);-o-box-shadow: 0 5px 15px rgba(0,0,0,0);box-shadow: 0 5px 15px rgba(0,0,0,0);background:transparent;}
.modal-transparent { background: transparent;}
.modal-transparent .modal-content {background-color: rgba(255, 255, 255,0.9) ;text-align:center;padding:0;margin:0;border:0;}
.modal-backdrop.modal-backdrop-transparent {  background: #000;}
.modal-backdrop.modal-backdrop-transparent.in {  filter: alpha(opacity=20);}
@media(max-width:767px){
	.modal-body img { max-width:100vw}
	.modal-transparent .modal-content {
		background-color: rgba(255, 255, 255,0.9) ;
		padding:0;
		margin:0;
	}
 }
 
@media only screen and ( max-width: 1300px ) { 
	#logo img{ max-width:5rem;}
	#content { padding:0;padding-top:20px;margin:0;}
	.projekte { font-size:2rem; margin:30px 0 10px 0; letter-spacing:2px;}
	.projekte_beschreibung{ font-size:1.5rem;line-height:1.8rem;}
	.projekt_titel { white-space:pre-wrap;font-size:1.6rem; margin:0; text-transform:uppercase; font-weight:100;  text-align:center}
	.projekt_untertitel { color:#fff;font-size:1.2rem; margin:0; font-weight:100;  text-align:center}
	.projekt_ansehen{  color:#fff;margin:20px 0 10px 0; font-weight:100; font-size:0.9rem;text-align:center}
	.projekt_beschreibung { color:#fff;font-weight:100; font-size:1rem;text-align:left}
	.projekt_titel_einzeln { background:transparent;bottom:10%;letter-spacing:2px;padding-left:50px;font-size:1.8rem; }
	.projekt_titel_header { font-weight:200;color:#666;letter-spacing:3px;padding-bottom:16px;font-size:1.4rem;text-transform:uppercase;  text-align:left}
	#content .content_content h2 {font-size:1.4rem;font-weight:500;}
	#content .content_content h3 {font-size:1.2rem;font-weight:500;}
	#content .content_content p {font-size:1rem;line-height:1.1rem;}
}
@media only screen and ( max-width: 921px ) { 
	#content { padding:0;padding-top:20px;margin:0;}
	.projekte { font-size:1.2rem color:rgba(0,0,0,0.9);margin:0;letter-spacing:1px;text-transform:uppercase; font-weight:100;  text-align:center}
	.projekte_beschreibung{ font-size:1rem;line-height:1.2rem;text-align:left}
	.projekt_titel { white-space:break-spaces;color:#fff;font-size:1.2rem; margin:0; text-transform:uppercase; font-weight:100;  text-align:center}
	.projekt_untertitel { color:#fff;font-size:1rem; margin:0; font-weight:100;  text-align:center}
	.projekt_ansehen{  color:#fff;margin:10px 0 10px 0; font-weight:100; font-size:0.9rem;text-align:center}
	.projekt_beschreibung{ color:rgba(0,0,0,0.6);font-weight:100; font-size:1rem;text-align:left}
	.projekt_titel_einzeln { background:transparent;position:absolute;bottom:cal(100vh - 50vh);letter-spacing:1px;font-size:1.5rem;text-align:center}
	.projekt_titel_header { font-weight:200;color:#333;letter-spacing:2px;padding-bottom:12px;font-size:1.2rem;text-transform:uppercase;  text-align:left}
	#logo img { max-width:4rem;}
	.back-to-top{display:none !important;}
	#content .content_content h2 {font-size:1.4rem;font-weight:500;}
	#content .content_content h3 {font-size:1.3rem;font-weight:500;}
	#content .content_content p {font-size:1rem;line-height:1.1rem;}
}
@media only screen and ( max-width: 651px ){
	#content { padding:0;padding-top:10px;margin:0;}
	.projekte {font-size:1.2rem;line-height:1.4rem;margin:20px auto 20px auto;text-align:center;}
	.projekte_beschreibung{ font-size:1rem;line-height:1.2rem;text-align:left}	
	.projekte_beschreibung p{ color:rgba(0,0,0,1);font-weight:300; font-size:1rem;line-height:1rem;text-align:left}
	.projekte_beschreibung h2{ color:rgba(0,0,0,1);font-weight:700; font-size:1.2rem;line-height:1.2rem;text-align:left}
	.projekte_beschreibung h3{ color:rgba(0,0,0,1);font-weight:500; font-size:1.1rem;line-height:1.1rem;text-align:left}
	.projekt_titel { white-space:break-spaces;color:#fff;font-size:1.1rem; margin:0; font-weight:100; text-align:center}
	.projekt_ort {color:#fff;font-size:0.9rem;letter-spacing:1px;font-weight:300;  text-align:center}
	.projekt_untertitel { color:#fff;font-size:1rem; margin:0; font-weight:100; text-align:center}
	.projekt_ansehen{  color:#fff;margin:10px 0 10px 0; font-weight:100; font-size:0.9rem;text-align:center}
	.projekt_beschreibung{ color:rgba(0,0,0,1);font-weight:100; font-size:1rem;text-align:left}
	.projekt_titel_einzeln { background:transparent;position:absolute;bottom:cal(100vh - 50vh);letter-spacing:1px;font-size:1.4rem;text-align:center}
	.projekt_titel_header { font-weight:200;padding-bottom:10px;color:#333;letter-spacing:1px;font-size:1.1rem;text-transform:uppercase;  text-align:left}
	.uebersicht { font-size:1rem;margin-top:1rem;margin-bottom:2rem}
	div#contentp > p{ font-size:1.4rem;line-height:1.6rem;margin-top:2rem;margin-bottom:4rem;text-align:center}
	div#contentp > p > a{font-size:1.2rem;line-height:1.5rem;}
	.mw-mobile { max-width:260px;}
	#mybg:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height:var(--mybgbeforeheight);background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.2007003484987745) 100%); }
	.ontop {margin-top:0;}
	.myblur {border-radius: 0;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.0);backdrop-filter: blur(0px);-webkit-backdrop-filter: blur(0px);}
	#content .content-titel { color:#fff;text-align:center;font-size:1.6rem;font-weight:500;margin:30px auto 10px auto}
	#content .content_content h2 {font-size:1.3rem;font-weight:500;}
	#content .content_content h3 {font-size:1.2rem;font-weight:500;}
	#content .content_content p {font-size:1rem;line-height:1.1rem;}
}
.fs-11{font-size:0.693rem;line-height:0.945rem;}
.fs-12{font-size:0.756rem;line-height:1.008rem;}
.fs-13{font-size:0.819rem;line-height:1.071rem;}
.fs-14{font-size:0.882rem;line-height:1.134rem;}
.fs-15{font-size:0.945rem;line-height:1.197rem;}
.fs-16{font-size:1.008rem;line-height:1.26rem;}
.fs-17{font-size:1.071rem;line-height:1.323rem;}
.fs-18{font-size:1.134rem;line-height:1.386rem;}
.fs-19{font-size:1.197rem;line-height:1.449rem;}
.fs-20{font-size:1.26rem;line-height:1.512rem;}
.fs-21{font-size:1.323rem;line-height:1.575rem;}
.fs-22{font-size:1.386rem;line-height:1.638rem;}
.fs-23{font-size:1.449rem;line-height:1.701rem;}
.fs-24{font-size:1.512rem;line-height:1.764rem;}
.fs-25{font-size:1.575rem;line-height:1.827rem;}
.fs-26{font-size:1.638rem;line-height:1.89rem;}
.fs-27{font-size:1.701rem;line-height:1.953rem;}
.fs-28{font-size:1.764rem;line-height:2.016rem;}
.fs-29{font-size:1.827rem;line-height:2.079rem;}
.fs-30{font-size:1.89rem;line-height:2.142rem;}
.fs-31{font-size:1.953rem;line-height:2.205rem;}
.fs-32{font-size:2.016rem;line-height:2.268rem;}
.fs-33{font-size:2.079rem;line-height:2.331rem;}
.fs-34{font-size:2.142rem;line-height:2.394rem;}
.fs-35{font-size:2.205rem;line-height:2.457rem;}
.fs-36{font-size:2.268rem;line-height:2.52rem;}
.fs-37{font-size:2.331rem;line-height:2.583rem;}
.fs-38{font-size:2.394rem;line-height:2.646rem;}
.fs-39{font-size:2.457rem;line-height:2.709rem;}
.fw-100{font-weight:100;}
.fw-200{font-weight:200;}
.fw-300{font-weight:300;}
.fw-400{font-weight:400;}
.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.mb-10{margin-bottom:10px;}
.mt-10{margin-top:10px;}
.mb-20{margin-bottom:20px;}
.mt-20{margin-top:20px;}
.mb-30{margin-bottom:30px;}
.mt-30{margin-top:30px;}
.mb-40{margin-bottom:40px;}
.mt-40{margin-top:40px;}
.mb-50{margin-bottom:50px;}
.mt-50{margin-top:50px;}
.mb-60{margin-bottom:60px;}
.mt-60{margin-top:60px;}
.mb-70{margin-bottom:70px;}
.mt-70{margin-top:70px;}
.mb-80{margin-bottom:80px;}
.mt-80{margin-top:80px;}
.mb-90{margin-bottom:90px;}
.mt-90{margin-top:90px;}
.mb-100{margin-bottom:100px;}
.mt-100{margin-top:100px;}
.ls-1{letter-spacing:1px;}
.ls-2{letter-spacing:2px;}
.ls-3{letter-spacing:3px;}
.ls-4{letter-spacing:4px;}
.ls-5{letter-spacing:5px;}