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



    @font-face{
        font-family:"Univers LT W02_57 Condensed";
        src:url("Fonts/1476006/b3076c6c-bd71-4e22-b22a-c32f76ad3352.woff2") format("woff2"),url("Fonts/1476006/e28a107b-2697-4228-822c-2ecfa2d1d0e5.woff") format("woff");
		font-display: swap;
    }
		
		body{
			margin: 0;
			padding: 0;
			font-family: 'Univers LT W02_57 Condensed', sans-serif;
			font-size: 18px;
			color:#999;
		}
a{
	color: #999;
}
		header{
			width: 100vw;
		height: 100px;
		background-color: #EDE9E2;
			position: fixed;
			top: 0px;
			z-index: 100;
		}
.headborder{
	border-bottom: 16px solid #fff;
}
		.inner{
			width: calc(100% - 60px);
			max-width: 1200px;
			margin: 0 auto;
			position: relative;
		}
		main{
			margin: 144px auto 0 auto;
			width: calc(100% - 60px);
			max-width: 1200px;
			height: calc(100vh - 210px);
			display: flex;
			align-items: center;
			justify-content:space-between;
		}
		.maintext{
			margin: 144px auto 0 auto;
			width: calc(100% - 60px);
			max-width: 1200px;
			height: calc(100vh - 210px);
		}
		.galerie{
			width: calc(100% - 60px);
			margin: 180px auto 0 auto;
			max-width: 1200px;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content:space-between;
		}

		.galerie-2{
			width: calc(100% - 60px);
			margin: 60px auto 0 auto;
			max-width: 1200px;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content:space-evenly;
		}
		.row{
			margin: 24px auto 0 auto;
			width: calc(100% - 60px);
}
.projekte{
	width: calc(100% - 60px);
	margin: 24px auto 120px;
	max-width: 1200px;
}
.projekte a{
	color: #999;text-decoration: underline;
}

.projekte a:hover{
	color: #000;
}
.voll{
	width: 100%;
}
.halb{
	width: 49%;
}
.voll img, .halb img, .drittel img, .zweidrittel img, .viertel img{
	width: 100%;
}
p.voll, p.halb, p.drittel, p.zweidrittel{
	margin-top: 0;
	line-height: 150%
}
.caption{
			margin-top: -50px;
			font-style: italic;
			letter-spacing: 0.03em;
			font-size: 17px;
		}
.caption-2{
			margin: 10px 0 0 0;
			font-style: italic;
			letter-spacing: 0.03em;
			font-size: 17px;
		}
.caption-3{
			margin: 5px 0 0 0;
			font-style: italic;
			letter-spacing: 0.03em;
			font-size: 17px;
		}
.caption-4{
			margin: 5px 0 0 0;
			font-style: italic;
			letter-spacing: 0.03em;
			font-size: 17px;
		}
.drittel{
	width: 33%;
}
.zweidrittel{
	width: 66%;
}
.viertel{
	width: 25%;
}
.left{
	margin-right: 24px;
}
.flexbox{
	display: flex;
	margin: 60px 0;
	align-items: flex-start;
}
.lastrow{
	padding-bottom: 120px;
}
.uebersicht img{
	width: 100%;
}
h1{
	font-size: 24px;
	font-weight: normal;
	color: #999;
	margin: 0;
}
h2, .black, strong{
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	color: #000;
}
h3{
	font-size: 16px;
	font-weight: normal;
	margin: 0px;
	color: #333;
}
h4{
	font-weight: normal;
	color: #000;
}
.galerie a{
	font-size: 18px;
	color: #999;
	text-decoration: none;
}
		.introbild{
			height:20vw;
			background-color: #fff;
			width: calc(25% - 18px);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
		}
		.uebersicht{
			height:auto;
			background-color: #fff;
			width: calc(25% - 18px);	
		}
.headline{
	justify-content: flex-start;
}
		footer{
			bottom:0px;
			width: 100vw;
			height: 36px;
			background-color: #EDE9E2;
		}
		.erhalt{
			background-image: url("bilder/startseite/langersgut-duesseldorf-alt.jpg");
		}
		.ergaenzung{
			background-image: url("bilder/startseite/stahlhaus-anbau-alt.jpg");
		}
		.visionen{
			background-image: url("bilder/startseite/baustellengeruest-alt.jpg");
		}
		.profil{
			background-image:url("bilder/startseite/profil-alt.jpg");
		}
		nav{
			display: block !important;
			max-width: 1200px;
			margin: 0 auto;
		}
		nav ul{
			float: left;
			outline-style: none;
			margin-top: 82px;
			z-index: 500;
			position: relative;
			padding: 0;
		}
		nav ul li{
			display: inline;
			margin-right: 48px;
		}
		.logo{
			position: absolute;
			right: 0;
		}
		nav ul li a{
			color: #999;
			text-decoration: none;
			letter-spacing: 0.1em;
		}
		nav ul li a:hover{
			color: #333;
		}
.current{
	color: #000;
}
		.submenu{
			width: calc(100% - 60px);
			max-width: 1200px;
			margin: 0 auto;
		}
		.submenu ul{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.submenu ul li{
			display: inline;
			margin-right: 48px
		}
		.submenu ul li a{
			font-size: 80%;
			color: #666;
			letter-spacing: 0.1em;
			text-decoration: none;
		}
		.submenu ul li a.current{
			color: #000;
		}
		.nav-toggle {
			display:none;
		}
img{
	animation: einblenden 1.5s;
    -moz-animation: einblenden 1.5s; /* Für Firefox */
    -webkit-animation: einblenden 1.5s; /* Für Safari und Chrome */
    -o-animation: einblenden 1.5s; /* Für Opera */
}
.eins{
	animation: einblenden 1s;
    -moz-animation: einblenden 1s; /* Für Firefox */
    -webkit-animation: einblenden 1s; /* Für Safari und Chrome */
    -o-animation: einblenden 1s; /* Für Opera */	
}
.zwei{
	animation: einblenden 2s;
    -moz-animation: einblenden 2s; /* Für Firefox */
    -webkit-animation: einblenden 2s; /* Für Safari und Chrome */
    -o-animation: einblenden 2s; /* Für Opera */	
}
.drei{
	animation: einblenden 3s;
    -moz-animation: einblenden 3s; /* Für Firefox */
    -webkit-animation: einblenden 3s; /* Für Safari und Chrome */
    -o-animation: einblenden 3s; /* Für Opera */	
}
.vier{
	animation: einblenden 4s;
    -moz-animation: einblenden 4s; /* Für Firefox */
    -webkit-animation: einblenden 4s; /* Für Safari und Chrome */
    -o-animation: einblenden 4s; /* Für Opera */	
}
@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}

@-moz-keyframes einblenden { /* Für Firefox */
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes einblenden { /* Für Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
}

@-o-keyframes einblenden { /* Für Opera */
    from { opacity:0; }
    to { opacity:1; }
}
.flexend{
	align-items: flex-end;
}
.imageborder{
	border: 1px solid #e3e3e3;
}
nav .logo img{
	height: 100px;
}
.projektnav{
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}
.sw{
	filter: brightness(1.25);
}
table{
	padding-right: 12px;
}
td{
vertical-align: top;
font-size: 90%;
padding: 8px 8px 0 0;
min-width: 80px;
}
			.space{
				font-size: 26px;
			}
		
		@media all and (orientation:portrait){
		.logo{
			right: 6%;
		} 
		nav li{
			float: left;
			width: 100%;
			margin-top: 60px;
		}
		nav{
			height: 0;
			overflow: hidden;
			transition: height .4s ease-in;
		}
		.nav-toggle{
			position: absolute;
			left:24px;
			top:77px;
			cursor:pointer;
		}
			.nav-toggle.nav-open{
				display: block;
			}
			#nav-open:target .nav-closed {
			display:block !important;
		}
		.nav-closed,
			#nav-closed:target .nav-closed,
			#nav-open:target .nav-open {
			display:none;
		}
			#nav-open:target nav {
			height:100vh;
			background-color: #EDE9E2;
		}
			main{
				flex-direction: column;
				width: 100%;
			}
			.introbild{
				height: 20%;
				width: calc(100% - 48px);
			}			
		.uebersicht{
			width: 47%;	
		}
			.mobilrow{
				margin-bottom: 5%;
			}
			.on-off{
				display: none;
			}
			.submenu ul li {
    margin-right: 4px;
}		
.projekte{
	width: calc(100% - 45px);
}
			.flexbox{
			flex-direction: column;	
				margin: 0px;
			}
			.left, .right, .middle{
				margin: 0;
			}			
.voll, .halb, .drittel, .zweidrittel, .viertel{
	width: 100%;
	margin: 24px 0;
}
			h1{
				margin: 0;
			}
			
		.row{
			width: 90%;
			margin-top: 5%;
}
			nav ul{
				margin-left: 5%;
			}
			.inner{
				width: 100%;
			}
			.galerie{
				width: calc(100% - 45px);
			}
			
.caption{
			margin-top: -20px;
		}
.caption-2{
			margin: -20px 0 10px 0;
		}
			.caption-3{
				margin: -24px 0 24px 0;
			}
			.special-text-align{
				text-align: right;
			}
		.submenu ul li a{
			letter-spacing: 0.05em;
		}
			.space{
				font-size: 0px;
			}
			}

@media (hover: none) and (pointer: coarse) {
	footer{
		position: relative;
	}
	}