html, body{
	margin: 0;
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
	background-color:white;
}

header{
	overflow:hidden;
		z-index:3;
		position: fixed;
		width:100%;
		width:calc(100% - 2rem);
		top:0;
	background-color: hsla(0, 0%, 100%, 1);
		box-shadow: 0 0 2rem black;
		border-style: solid;
	border-color:hsl(277, 66%, 34%);
	border-width: 0 0 1px 0;
	display:flex;
	justify-content: space-between;
	padding: 0 1rem 0 1rem;

	/*! filter: blur(5px); */
}
header .logo img, header .menue-button img, header .menue-button-active img{
	display:block;
	max-height:4rem;
}

header .logo img{
	padding:1rem 0;
	max-height:2rem;
}


nav{


	line-height:4rem;
	padding:0;
	text-align:center;
	font-size:1.2em;
}


nav a{
	padding:0 1rem;
	text-decoration:none;
	color:hsl(277, 66%, 34%);
	transition:color 0.2s;
}

nav a:hover{
	color: hsl(277, 66%, 50%);
}

nav a.active{
	color:hsl(277, 66%, 20%);
}


/****************/

.transparent-nav{
	z-index:5;
	position: relative;
	margin-top:-4rem;
	line-height:4rem;
	background-color: hsla(0, 0%, 0%, 0.50);
	padding:0;
	text-align:center;
	font-size:1.2em;
}


.transparent-nav a{
	padding:0 1em;
	text-decoration:none;
	color:white;
}
.transparent-nav a:active{
	color:grey;
}

/*****************/

main .splash{
		background-color:black;
	max-height:100vh;
	padding-bottom:0em;
	position:relative;
	z-index:4;
	overflow:hidden;
}
main .splash img{
	position:relative;
	display:block;
	max-width:100%;
}

main{
	padding-top:0rem;
	padding-bottom:1em;
	margin-bottom: 10rem;/*10em footer*/
	background-color:white;
	
	border:solid;/*border als seltsamen fix*/
	border-width: 0 0 1px 0;
	border-color:white;
}


footer{
	position:fixed;
	width:100%;
	width:calc(100% - 2rem);
	height:8rem; /*10em - 2em padding*/
	padding:1rem;
	bottom:0;
	z-index:-2;
	text-align:center;
	background-color:black;
	color:darkgrey;
}
footer a{
	text-decoration:none;
	color:white;
}

@media  (max-height: 20em) {
header{
	position:relative;
}	
	
footer{
	position:inherit;
}

main{
	padding-top: 0rem !important;
	margin-bottom: 0rem;/*10em footer*/
}
}

/*-----------------------mobile---------------------------------------------------------------*/

header .menue-button, header .menue-button-active {
		display:none;
	}

@media  (max-width: 48em) {
	header .logo img, header .menue-button img, header .menue-button-active img{
		max-height:3rem;
	}
	header .logo img{
		padding:0.5rem 0;
		max-height:2rem;
	}

	main {
		padding-top:0rem;
	}

	header nav{
		line-height:3rem;
	}
	header {
		box-shadow: 0 0 1rem black;
	}
	
	
	#menue .center , #menue .right{
		display:none;
	}
	
	#menue:target .logo{
		display:none;
	}
	
	#menue:target .center , #menue:target .right{
		display: block;
	}
	
	
	header:target {
		position:relative;
		text-align:right;
		display:block;
	}
	header:target ~ main {
		margin-top:0rem;
	}
	
	#menue .menue-button {
		display:block;
	}
	
	#menue:target .menue-button{
		display:none;
	}
	
	#menue:target .menue-button-active{
		display:inline-block;
	}
	
	
	nav a{
		display:block;
	}
}





/*general contentstyle*/

p,.max-content-width{
	max-width: 48em;
	padding:0 1em;
	margin: 0 auto;
}
.justify-box{
	display:flex;
	justify-content: space-between;
}

.column-box{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: stretch;

  margin:0 auto;
  padding:0.5em;
}

.column-box>div{
	 flex: 1;
  min-width: 12em;
  max-width:50em;
  margin:0.5em;
  margin-bottom:2em;
}

.column-box img{
	max-width:100%;
}


.box-border{

	border-radius:0.5rem;
	padding:1rem;
	border: 1px solid hsl(277, 66%, 34%);
	box-shadow: 0 0 1rem hsl(0, 0%, 75%);
}

.center{
	text-align: center;
	margin: 0 auto;
}

.top-padding2{
	padding-top:2rem;
}

.top-padding8{
	padding-top:8rem;
}


form {
	max-width:30rem;
	background-color:white;
}
form input{
	background-color:white;
	color:black;
	border-radius:0.5rem;
	font-size:1.2em;
	padding:0.5em 1em 0.5em 1em;
	text-align:center;
	border: 2px solid hsl(277, 66%, 34%);
	box-shadow: inset 0 0 1rem hsl(0, 0%, 75%);
	transition: box-shadow 0.2s;
	margin: 0.25em 0em 2em 0em;
	
	width: 100%;
	width: calc(100% - 2em - 2rem);
	max-width:20rem;
	min-width: 3em;
}
form input:focus{
	
	border: 2px solid hsl(277, 66%, 50%);
}


form button{
	background:linear-gradient(hsl(277, 66%, 65%) 0%, hsl(277, 66%, 34%) 100%);
	color:white;
	border-radius:0.5rem;
	font-size:1.2em;
	padding:0.5em 1em 0.5em 1em;
	text-align:center;
	border: 0px solid hsl(277, 66%, 34%);
	box-shadow: inset 0 0 0rem hsl(0, 0%, 0%);
	transition: box-shadow 0.2s;
	margin: 0.25em 1em 2em 1em;
	text-shadow: 1px 1px black;
	
}





/*specific contentstyle*/
.download-box{
	margin-bottom:4rem;
}


.download-box-right a.download-button{
	display:block;
	background-color:hsl(277, 66%, 34%);
	transition:background-color 0.2s;
	color:white;
	text-decoration:none;
	font-size:1.2em;
	border-radius:0.5rem;
	padding:0.5em 1em 0.5em 1em;
	margin-left:1em;
	text-shadow: 1px 1px grey;
	text-align:center;
}

/* spendenbutton
.download-box-right a.download-button:last-of-type{
	font-size:1em;
	margin-left:5em;
	margin-right:0em;
}
*/

.download-box-right a.download-button:hover{
	background-color:hsl(277, 66%, 50%);
}


/*spaltenaufhebung*/

@media  (max-width: 35em) {
	.box-border{
		border: none;
		box-shadow: none;
		padding:0;
	}
	.justify-box{
		display:block;
	}
	
	.download-box-right a.download-button{
		margin:1em;
	}
}