html, body{
	margin: 0;
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
	background-color:hsl(0, 0%, 87.1%);
}

a {
	outline: 0;
	text-decoration:none;
	color:hsl(206, 100%, 50%);
	transition:color 0.25s;
}

a:hover{
	color: hsl(358, 85.3%, 52%);
}

a:active{
	transition:color 0s;
	color: hsl(358, 85.3%, 20%);
}




header{
	overflow:hidden;
		z-index:3;
		position: fixed;
		width:100%;
		top:0;
	background-color: hsla(0, 0%, 100%, 1);
		box-shadow: 0 0 1rem hsla(0, 0%, 50%, 1);
	display:flex;
	justify-content: space-between;
	padding: 0;

	/*! 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 1rem 1rem;
	max-height:2rem;
}




nav{


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


nav a{
	padding:0 1rem;
	color:hsl(0, 0%, 35.7%);
}

nav a:hover{
	color: hsl(0, 0%, 0%);
}

nav a:active, nav a:focus:hover{
	color:hsl(206, 100%, 50%);
	color:hsl(212, 100%, 36%);
}


nav a.active{
	color:hsl(212, 100%, 36%);
	color:hsl(206, 100%, 50%);
}

a.highlight{				
	animation: jump-highlight 500ms 5 ease-in-out; 
}


@keyframes jump-highlight {
	0% {position:relative;top:0}
	50% {position:relative;top:-0.5em}
	100% {position:relative;top:0}
}


.splash{
		background-color:black;
	/*max-height:100vh;*/
	position:relative;
	z-index:4;
	overflow:hidden;
}
.splash img{
	position:relative;
	display:block;
	width:100%;
}


main{
	display:block;
	max-width: 48em;
	margin: 0em auto 0 auto;

	padding:4rem;
	margin-bottom: 10rem;/*10em footer*/
	background-color:white;
	
	 /*border:solid;*/ /*border als seltsamen fix*/
	 /*border-width: 0 0 1px 0;*/
	/*border-color:white;*/
	min-height: calc(100vh - 8rem);
	box-shadow: 0 0 1rem hsla(0, 0%, 50%, 1);
	position: relative;
	
	

}

footer{
	position:fixed;
	width:100%;
	width:calc(100% - 2rem);
	height:8rem; /*10em - 2em padding*/
	padding:1rem;
	bottom:0;
	z-index:-2;
	text-align:center;
	color:hsl(0, 0%, 0%);
}

footer a{
	color:hsl(0, 0%, 52%);
}
footer a:hover{
	color:hsl(0, 0%, 0%);
}
footer a:active{
	color: hsl(358, 85.3%, 52%);
}

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

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



/*desktop only*/
@media  (min-width: 48em) {
	/*center centern*/
	nav.center{
		position:absolute;
		right:0;
		left:0;
		z-index:-1;
	}
	/*center centern ende*/

}

/*-----------------------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{
		padding:0.5rem;
		max-height:2rem;
	}

	main {
		padding:3rem 2rem 2rem 2rem;
		min-height: calc(100vh - 5rem);
		margin-bottom:0;
	}
	
	footer{
		position: inherit;
	}
	
	html, body{
		background-color:hsl(0, 0%, 80%);
	}
	
	footer a{
		/*color:hsl(206, 100%, 40%);*/
		color:hsl(0, 0%, 40%);
		
	}
	

	header nav{
		line-height:3rem;
	}
	
	
	#menue .center , #menue .right{
		display:none;
	}
	/*
	#menue:target .logo{
		display:none;
	}*/
	
	#menue:target .center , #menue:target .right{
		display: block;
	}
	
	
	header {
		transition:all 0.5s linear;
		max-height:3rem;
	}
	
	header:target {
		text-align:right;
		display:block;
		max-height:100vh;
	}
	
	#menue .menue-button {
		padding-right:0.5rem;
		display:block;
	}
	
	#menue:target .menue-button{
		display:none;
	}
	
	#menue:target .menue-button-active{
		padding-right:0.5rem;
		display:inline-block;
	}
	
	
	nav a{
		display:block;
	}
	
	
	.feedback-box a{
		padding-left:1em;
	}
	
}

@media  (max-width: 24em) {
	main{
		padding:1rem;
	}
}




/*--------------------general contentstyle-----------------------------------------------------------------*/

h1{
	padding-top:3rem;
	padding-bottom:1rem;
	margin:0;
	font-weight:lighter;
}

p,.max-content-width{
	max-width: 48em;
	padding:0;
	margin: 0em auto 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(0, 0%, 75%);
	/*box-shadow: 0 0 1rem hsl(0, 0%, 75%);*/
}

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





form {
	max-width:100%;
	background-color:white;
	text-align:right;
}
form input,form textarea{
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	color: black;
	border-radius: 0.5rem;
	font-size: 1.2em;
	padding: 0.5rem 1rem 0.5rem 1rem;
	border: 2px solid hsl(0, 0%, 90%);
	box-shadow: inset 0 0 1rem hsl(0, 0%, 88%);
	transition: box-shadow 0.2s;
	margin: 0.25rem 0rem 2rem 0rem;
	width: 100%;
	width: calc(100% - 2rem - 4px);
	max-width: 100%;
	min-width: 3em;
	 resize: vertical;
	 outline-style:none;
}
form input:focus, form textarea:focus{
	
	border: 2px solid hsl(206, 100%, 60%);
	box-shadow: inset 0 0 1rem hsl(0, 0%, 80%);
}


form button, .button{
	background:linear-gradient(hsl(206, 100%, 60%) 0%, hsl(212, 100%, 46%) 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%);
	text-shadow: 1px 1px black;
	
}

form button:hover,.button:hover{
	color:white;
	background:linear-gradient(hsl(206, 100%, 68%) 0%, hsl(212, 100%, 52%) 100%);
	
}

form button:active,.button:active{
	color:white;
	background:linear-gradient(hsl(206, 100%, 46%) 0%, hsl(212, 100%, 56%) 100%);
	
}





/*specific contentstyle*/
.download-box{
	margin-top:2rem;
}

.download-box{
	padding: 1rem;
}

.download-box h2{
	font-weight: lighter;
	margin-top: 0rem;
}

.download-box-right{
	text-align:right;
	min-width:5em;
	margin: auto 0;
}


.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%);
}

.download-box-right a.download-button:active{
	transition:background-color 0.05s;
	background-color:hsl(277, 66%, 20%);
}

.firefox-download{
	border-color:hsl(29, 100%, 46%);
	padding: 2.2rem 1rem;
	margin-bottom:4rem !important;
}
.firefox-download h2{
	color:hsl(29, 100%, 46%);
}
.firefox-download .download-box-right a {
	background-color:hsl(29, 100%, 46%);
}
.firefox-download .download-box-right a:hover {
	background-color:hsl(29, 100%, 55%);
}
.firefox-download .download-box-right a:active {
	background-color:hsl(29, 100%, 40%);
}

.chrome-download{
	border-color:hsl(80, 100%, 35%);
	padding: 2.2rem 1rem;
	margin-bottom:4rem !important;
}
.chrome-download h2{
	color:hsl(80, 100%, 35%);
}
.chrome-download .download-box-right a {
	/*background-color:hsl(50, 100%, 50%);*/
	background-color:hsl(80, 100%, 35%);
}
.chrome-download .download-box-right a:hover {
	background-color:hsl(80, 100%, 38%);
}
.chrome-download .download-box-right a:active {
	background-color:hsl(80, 100%, 30%);
}

.edge-download{
	border-color:hsl(215, 100%, 55%);
	padding: 2.2rem 1rem;
	margin-bottom:4rem !important;
}
.edge-download h2{
	color:hsl(215, 100%, 55%);
}
.edge-download .download-box-right a {
	background-color:hsl(215, 100%, 55%);
}
.edge-download .download-box-right a:hover {
	background-color:hsl(215, 100%, 64%);
}
.edge-download .download-box-right a:active {
	background-color:hsl(215, 100%, 44%);
}



/*spaltenaufhebung*/

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




















.top-padding1{
	padding-top:1rem;
}
.top-padding2{
	padding-top:2rem;
}
.top-padding3{
	padding-top:3rem;
}

.top-padding4{
	padding-top:4rem;
}

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

.bottom-padding1{
	padding-bottom:1rem;
}
.bottom-padding2{
	padding-bottom:2rem;
}
.bottom-padding3{
	padding-bottom:3rem;
}

.bottom-padding4{
	padding-bottom:4rem;
}

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