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

/* Legt Grundlagen für das Dokument fest*/
html {
	overflow: hidden;
	min-width: 100%;
	min-height: 100%;
	font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Helvetica", "Verdana", "sans-serif"
}

/*legt die Eigenschaften des Zentralen Inhalstkörpers Fest*/
body {
	margin: 0px;
	display: grid;

}

/*Hier wird Die Slideshow für den Hintergrund erzeugt*/
.Slideshow, .Slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
	margin: 0;
	list-style-type: none;
	padding: 0;
}
.Slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	animation: imageAnimation 36s linear infinite 0s;
}
.Slideshow li:nth-child(1) span {
	background-image: url(img/Background/Duisdorf.jpg);
}
.Slideshow li:nth-child(2) span {
	background-image: url(img/Background/Duisdorf_Einfahrt.jpg);
	animation-delay: 6s;
}
.Slideshow li:nth-child(3) span {
	background-image: url(img/Background/Duisdorf_Turnhalle.jpg);
	animation-delay: 12s;
}
.Slideshow li:nth-child(4) span {
	background-image: url(img/Background/Loft_Aussen.jpg);
	animation-delay: 18s;
}
.Slideshow li:nth-child(5) span {
	background-image: url(img/Background/Loft_Treppe.jpg);
	animation-delay: 24s;
}
.Slideshow li:nth-child(6) span {
	background-image: url(img/Background/Sauerstrasse_Balkon.jpg);
	animation-delay: 30s;
}
@keyframes imageAnimation {
	0% {
		opacity: 0;
		animation-timing-function: ease-in;
	}
	8% {
		opacity: 1;
		animation-timing-function: ease-out;
	}
	17% {
		opacity: 1
	}
	25% {
		opacity: 0
	}
	100% {
		opacity: 0
	}
}

/* Erstellt das Feld für den Content*/
.main {
	background-color: white;
	z-index: 1;
	margin-top: 33vh;
}
/*lower version of .main*/
.index  {
	background-color: white;
	z-index: 1;
	margin-top: 22em;
}

/*Das Design für die Navigationsleite wird hier erzeugt*/
.nav-style {
	width: 75%;
	min-width: 75%;
	margin: 0 auto;
}
.nav-style ul {
	width: 100%;
	text-align: center;
	padding: 0;
	margin-bottom: 2em;
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
}
.nav-style ul li {
	display: grid;
	text-align: center;
	padding: 0.3em;
	padding-bottom: 0.1em;
	float: left;
}
.nav-style ul li a {
	align-self: center;
	text-decoration: none;
	color: black;
	font-weight: bold;
	font-size: 14px;
}
.nav-style ul li a:hover {
	color: white;
}

#Wir {
	background-color: #660000;
}
#denken {
	background-color: #CC3300;
}
#planen {
	background-color: #FF9900;
}
#bauen {
	background-color: #339900;
}
#zb {
	background-color: #3366CC;
}
#Logo {
	overflow: visible;
	text-align: center;
}

/*Die Verschiedenen Inhaltseiten werden hier erzeugt.*/
/*Die Willkommenseite*/
#sec-Hello {
 display: block;
 z-index: 0;
 float: inherit;
}
#sec-Hello img {
	width: 21em;
	display: block;
	column-span: all;
	margin: auto;
}

/*Algemeine darstellung der Inhalts seiten*/
.main section {
	width: 75%;
	margin: auto;
	text-align: justify;
	display: none;
	margin-bottom: 1em;
	column-fill: auto;
}
.main section:target {
	z-index: 3;
	display: block;
	}
b {
	font-size: 14;
	font-weight: 450;
	color: aqua;
}
p {
	font-size: 14px;
	line-height: 17px;
	margin-top: 0;
	break-inside: avoid;
	font-weight: 400;
	color: #808080;
}
ol {
	font-size: 14px;
	line-height: 17px;
	margin-top: 0;
	break-inside: avoid;
	font-weight: 400;
	color: #808080;
}
/*Die verschiedenen Seiten werden hier Gestaltet*/
/*Zunächst die farben der Einzelnen Bereiche*/
#sec-Wir b {
	color: #660000;
}
#sec-Denken b {
	color: #CC3300;
}
#sec-Planen b {
	color: #ff9900;
}
#sec-Bauen b {
	color: #339900;
}
#sec-zb b {
	color: #3366CC;
}
#sec-Impressum {
	color: #808080;
}

/*Der textblock wird gestaltet*/
.home {
	width: 20%;
	max-width: 20%;
	float: left;
}
.home a img{
	max-width: 100%;
	height: auto;
}
.text {
	column-count: 2;
	width: 100%;
	margin-left: auto;
	margin-bottom: 1em;
	float: right;

}
.scroll{
	max-height: 40vh;
	overflow: auto;
}
/*Nun Das Kontaktformular*/
#formcontainer{
	column-count: 1;
}

.contactform{
	display: grid;
	grid-template-columns: repeat(4,25%);
	width: 100%;

}
.contactform input{
	grid-column:2/-2;
	height: 2em;
	border: 1px solid #808080 ;
	margin: 0.5em 0;

}
.contactform input:hover{
	background-color: #F5F5F5
}
/*.contactform input:invalid {
	border-color: #C32E04
}*/
.contactform textarea {
	grid-column:2/-2;
	height: 9em;
	border: 1px solid #808080;
	margin: 0.5em 0;
	padding: 0.5em 0;

}
.contactform textarea:hover{
	background-color: #F5F5F5
}
.contactform button{
	grid-column:2
}



/*Das design des Footers wird dargestellt*/
.foot {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	position: fixed;
	bottom: 0px;
	background-color: white;
	width: 100%;
	text-align: center;
	padding: 0.5em;
	padding-bottom: 0.5em;
}
.footitem {
	align-self: center;
	vertical-align: text-bottom;

}
.afoot {
	text-decoration: none;
	color: #949ba3;
	font-size: 16px;
	font-weight: 400;
}
.afoot:hover {
	color: black;
}

#sec-Datenschutz scroll {
	width: 100%

}


@media only screen and (max-width: 600px) {

.Slideshow {
	display: none;
}

.main {
	margin-top: 0;
}

.nav-style {
	margin: 0;
	width: 100%;
}
.nav-style ul{
	margin: 0;
	height: 3em;
}
.nav-style ul li{
	hyphens: auto;
}



}