/*eigene Style*/
@font-face{
	font-family: "AceofSpades";
	src: url("./src/AceofSpades-Regular.woff") format('woff');
}
@font-face{
	font-family: "Aviator";
	src: url("./src/Aviator-SansVintage.woff") format('woff');
}
body, .dropdown-menu{
	background: lightgray;
}
.errPHP {
	display: inline;
	white-space: nowrap;
	padding-left: 1em;
}
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	display: none;
}
.loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #97210C;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -60px 0 0 -60px;
}
#loading-countdown {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	text-align: center;
}
#countdown {
	color: white;
	font-size: 6em;
	white-space: nowrap;
	width: 40%;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 30%;
	margin: -60px 0 0 -60px;
}
#box{
	max-width: 1200px;
	margin: 0 auto;
}
#header{
	/*border: 2px dashed orange;*/
	font-family: "AceofSpades";
	font-size: 4.7em;
	color: #97210C;
	text-shadow: 2px 2px black;
	text-align: center;
	background: url("./src/guttenberg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: -125px;
	border-radius: 18px 18px 0px 0px;
	padding: .6em 0 .4em 0;
}
#nav{
	/*border: 2px dashed yellow;*/
	height: 1.8em;
	font-family: "Aviator";
	font-size: 1.7em;
	text-align: center;
	position: relative;	
}
#register{
	width: 60%;
}
.infobox{
	width: 60%;
}

.slider {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.slides {
	display: flex;
	transition: transform 0.5s ease-in-out;
}
.slide {
	min-width: 100%;
	transition: opacity 1s;
}
img {
	width: 100%;
	object-fit: cover;
}
.buttons {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
}
.buttons button {
	background: rgba(0,0,0,0.5);
	color: white;
	border: none;
	padding: 15px;
	cursor: pointer;
}

#register-box{
	display: none;
}
div.matrix{
	position: absolute;
	width: 30%;
	top: 4em;
	right: 4em;
}
img.matrix{
	width: 50%;
}
#booking{
	width: 100%;
}
ol{
	margin: 0 auto;
	padding: 0;
}
li{
	padding: .2em .5em .5em .5em;
	list-style-type: none;
	display: inline;
}
.dropdown{
	display: inline-block;
	text-decoration: underline;
}
.dropdown-menu{
	display: none;
	position: absolute;
	top: 1.8em;
	width: auto;
	left: 0px;
	right: 0px;
	padding: .2em 3em .2em 3em;
	text-align: center;
	border-top: 1px solid;
	border-color: black;
	z-index: 1;
}
.dropdown:hover{
	color: #97210C;
}
.dropdown:hover .dropdown-menu{
	display: block;
}
#data{
	/*border: 2px dashed red;*/
	position: relative;
	padding: 4em;
	font-family: "Aviator";
	font-size:1em;
	background: white;
}
#top{
	margin-bottom: 1em;
}
.form-input{
	margin-bottom: 1.5em;
}
label, input[type=email], input[type=text]{
	float: left;
	height: 1.2em;
}
label{
	width: 8em;
}
#bed{
	color: gray;
}
#green{
	color: #2a8000;
	text-shadow: 1px 1px black;
}
#yellow{
	color: #ff8f00;
	text-shadow: 1px 1px black;
}
#red{
	color: #cc0000;
	text-shadow: 1px 1px black;
}
#nextreg{
	font-size: 1.5em;
}
.br-space{
	height: 8em;
}
a, a:link, a:visited{
	color:black;
}
a:hover{
	color: #97210C;
}
.current{
	color: #97210C;
	text-decoration: none;
}
/* Mobile Ansicht */
@media only screen and (max-width: 900px){
	#header{
		/*border: 2px dashed orange;*/
		font-family: "AceofSpades";
		font-size: 2.8em;
		color: #97210C;
		text-shadow: 2px 2px black;
		text-align: center;
		background: url("./src/guttenberg.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: -125px;
		border-radius: 18px 18px 0px 0px;
		padding: .6em 0 .4em 0;
	}
	#data{
		/*border: 2px dashed red;*/
		position: relative;
		padding: 1em;
		font-family: "Aviator";
		font-size:1em;
		background: white;
	}
	#nav{
	overflow-x: scroll;
	white-space: nowrap;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	}
	h2{
		font-size: 1em;
	}
	.infobox{
		width: 100%;
	}
	#nextreg{
		display: none;
	}
	.br-space{
		height: 2em;
	}
	#register{
	width: 100%;
	}
	div.matrix{
	position: unset;
	width: 100%;
	top: unset;
	right: unset;
	}
	.matrix img {
		display: none;
	}
	#register-box{
		display: block;
	}
}
@media (prefers-color-scheme:dark){
	body, .dropdown-menu{
		background: #333333;
	}
	.loader {
		border: 16px solid #333333;
		border-top: 16px solid #97210C;
	}
	.dropdown-menu{
		border-color: white;
	}
	#data{
		background: #AAAAAA;
	}
	a, a:link, a:visited, .dropdown, .dropdown-menu{
		color: white;
		text-shadow: 1px 1px black;
	}
	a:hover{
		color: #97210C;
		text-shadow: 1px 1px black;
	}
	a.current{
		color: #97210C;
		text-shadow: 1px 1px black;
		text-decoration: none;
	}
}

@keyframes spin {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}