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

	
		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	font: inherit;
	box-sizing:border-box;
	
	-webkit-hyphens: auto;
    -ms-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
		}
			
			
		body {
			font-family: 'Quicksand', "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
		
		}
			
			
			
		header {
			margin:0 auto;
			height:100vh;
			width:100%;

		
		}
	
	
		header img#host {
		width:100%;
		height:100vH;
		object-fit:cover
			
			
		}
		
		
		#red {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			text-align: center;
			padding-top:50vH
			
		}
		


		
/*	
		
#logo {
	
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 40%;
    width: 5px;
	  transform: scale(.1);
  }

  to {
    margin-left: 0%;
    width: 200px;
	transform: scale(1);
  }

}
*/
		



		
	#arrow {
	
  	animation-duration: 3s;
  	animation-name: down;
	animation-iteration-count: 2;
}

@keyframes down {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

	h1 {
		color:#fff;
		font-size:4rem;
		font-family: 'Poppins','Quicksand', "Impact", "Trebuchet MS", "Verdana", "sans-serif";
		font-weight:600;
		
}

main h1 {
		color:#08c;
		font-size:2.5rem;
		font-family: 'Poppins','Quicksand', "Impact", "Trebuchet MS", "Verdana", "sans-serif";
		font-weight:600;
		text-shadow: 1px  1px 0 #7cf
}
		
		
	h2 {
		color:#fff;
		background-color:#f60;
		font-size:1.1rem;
		font-weight: 600;
		margin: 1rem 0 0;
		text-transform: uppercase;
		display: inline;
		padding: .05rem .25rem
	}
		
header p {color:#fff;
		margin:.5rem 0 1rem;
		font-size:1.1rem;
		line-height: 1.75rem;
		font-weight:400;}
		
	main p {
		margin:.5rem 0 1rem;
		color:#333;
		font-size:1.1rem;
		line-height: 1.75rem;
		font-weight:400;
			
		}


#datenschutz div {display:none}

section#datenschutz:hover div {display: block;}


#datenschutz ul li, #datenschutz p, #datenschutz a, #datenschutz h3 {
		margin:0;
		color:#08c;
		font-size:.75rem;
		line-height: 1rem;
		font-weight:300;
		list-style: none
}
		
#datenschutz ul li {margin:0;}	
#datenschutz ul {margin-bottom:.5rem}

#datenschutz h3, #datenschutz p {margin:1rem 0 .5rem; text-transform: uppercase}

section#datenschutz  {cursor:pointer}


		
span.kursiv  {color:#08c; font-style: italic; font-weight: 400; background-color: #abd; padding: .05rem .25rem}

p.skin  {color:#08c; font-weight: 400 }

		
main 	 {
			margin:0 auto;
			height:100%;
			width:100%;
			background-color: #fff;
			padding-top:.25rem;
						
		}	
		
main  nav {
	
	padding:0;
	width:100%;
	text-align: center;
		}	
		
		
main section {
	padding:5rem;
	max-width:1200px;
	margin:0 auto;

		}		
		
main section#wichtig {background-color: #fff}
		
		
main section#wichtig	h1 {
		color:#933149;
		font-size:2.5rem;
		font-family: 'Poppins','Quicksand', "Impact", "Trebuchet MS", "Verdana", "sans-serif";
		
		}
		
		
		
main section#wichtig	p {
		margin:.5rem 0 1.25rem;
		color:#933149;
		font-size:1rem;
		font-weight:300;
			
		}	
		
			
	

	aside {
			position:absolute;
			top:0;
			left:1rem;
			width:200px;
			height:auto;
			padding: .5rem
		}
		
		
nav { margin:0 auto 0; width:100%;}


.buchen {max-width:1200px; margin:3rem auto 1rem; text-align: center; }


.button {
	
	font-weight: 300;
	background-color:#511c2a;
	color:#fff;
	font-size:1.5rem;
	padding:.75rem 1.5rem;
	text-decoration: none;

	
	
}

.button:hover, .button:active, .button:focus {
	
	background-color:#fff;
	color:#511c2a;
}





		
main nav li {display:inline-block; color: #fff; background-color:#08c; padding:.5rem 1rem; margin-bottom: .2rem}
main nav li:active, main nav li:hover, main nav li:focus  {background-color:#f60; }



main nav li a {
	font-size:1rem;
	color:#fff;
	text-decoration: none;
}


main nav li a:hover, main aside li a:focus, main aside li a:active {
	color:#fff;
	}	


article p a {color:#f60; font-weight:600; text-decoration: none}
article p a:hover, article p a:active  {color:#08c}



	

strong {font-weight:700;}
		
article ul li {
			color:#08c;
			font-weight:400;
			padding: 0;
			text-decoration-line: none;
			list-style-position: outside;
			list-style-type: square;
			text-transform: uppercase
		}
		
.pic {float:left; 	margin:.55rem 1rem 1rem 0;
}

article figure img {float:left}
		

ul li::marker, 
ol li::marker {
  color: #456;
font-size: 1.5rem
}

.formular {
		font-family: 'Quicksand', sans-serif;
		height:1rem;
		background-color:transparent;
		border:none;
		border-bottom:1px solid #aaa;
		color:#333;
		font-size:.9rem;
		margin:.5rem 0;
		padding:0.5rem 1rem;

}


.form {	border:1px solid #aaa;}

.send {
	font-family: 'Quicksand', sans-serif;
	background-color: transparent;
	border:1px solid #aaa;
	color:#aaa;
	font-size:.9rem;
	font-weight:400;
	margin:.5rem 0;
	padding:0.75rem 1.25rem;
	cursor: pointer
	


	}
	

.ninety {width:90%}
	
		
		
section#impressum p a, section#impressum p {font-size: .85rem}		
		
		
		aside a {margin-left:.5rem}		
		
		
.up {
	width:40px;
	height:40px;
	background-color: #08c;
	color:#fff;
	text-align: center;
	padding-top:0;
	box-sizing: border-box;
	position: fixed;
	bottom: 1rem;
	right:1rem;
	z-index: 90;
	opacity: 0;
	
	font-size:2rem;
	
	 visibility: hidden;
  	-webkit-transition: 0.5s;
 	 -o-transition: 0.5s;
 	 transition: 0.5s;


}

.up.active {
  opacity: 1;
  visibility: visible;
}

.up.active:hover, .up.active:active, .up.active:focus {
	background-color: #f60;
}
		
		

		

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

	
	h1 {
		font-size:3rem;
	}
	
	#logo { width:80px}
	
	
		.button#korn {
	
	font-size:1rem;
	padding:.75rem 1rem
	}
}
	

	



@media screen and (max-width:500px){
	
	
	main section figure img {width:30%}

	

	main section {	padding:3rem;	}	
	
	

	
}
	
	
	




@media screen and (max-height:600px){
			
	#red {padding-top:53vH}
	
	.buchen {max-width:1200px; margin:3rem auto 1rem; text-align: center; }

	
}