@import url(nav.css);

/* base */
html, body 								{ margin: 0; padding: 0; }
body 									{ background: #fcfcfc; }
body, td, th 							{ font-family: 'Lato Light', sans-serif; color: #333; }
a, a:active, a:visited 					{ color: #C00; }
a:hover 								{ text-decoration: none; color: #333; }

/* home */
#homeWappen								{ position: absolute; }
.homeBlock								{ float: left; width: 50%; height: 30rem; position: relative; }
.homeBlock h1							{ color: #fff; }
.overlay								{ position: absolute; text-align: center; top: 0; right: 0; bottom: 0; left: 0; white-space: nowrap;
										  background: rgba(0,0,0,.60); }
.overlay:after 							{ content: ''; height: 100%; display: inline-block; vertical-align: middle; }
.overlay:hover							{ background: rgba(0,0,0,.1); }
.caption								{ display: inline-block; vertical-align: middle; padding: 1rem; margin-left: auto; margin-right: auto; 
										  white-space: normal; background: rgba(0,0,0,.85); }

/* header */
#wappen	img								{ width: 50px; height: auto; margin-top: 14px; }
#logo									{ display: block; padding: 1rem; }
header									{ border-bottom: 5px solid #383736; }
#headerImages							{ z-index: 1; }
.headerSlide							{ height: 60rem; }

#area									{ position: absolute; top: 15rem; right: 0; z-index: 100; }
#area ul								{ list-style: none; margin: 0; padding: 0; line-height: 1; }
#area a,
#area a:visited,
#area a:focus,
#area a:active							{ display: block; padding: .5rem 1rem; background: #F60; color: #fff; margin: 2px 0; font-size: 1.25rem; }
#area a:hover							{ background: #333; transition: background 0.3s ease; }
#area a.fb								{ background: blue; }

.slick-prev,
.slick-next								{ width: 30px; height: 30px; margin-top: -15px; }
.slick-prev 							{ left: 20px; }
.slick-next 							{ right: 20px; }
.slick-prev:before, 
.slick-next:before						{ color: #ccc; opacity: 1; font-size: 30px; }

button.slick-prev,
button.slick-next						{ background: none !important; }

/* footer */
footer									{ padding: 2rem; background: #eee7df; }
footer h4								{ font-size: 1.25rem; margin: 0; padding: 0; padding-bottom: .15rem; }

a.areaLink,
a.areaLink:visited,
a.areaLink:active						{ display: block; margin: 0 .25rem; padding: .15rem; text-decoration: none; color: #333; }
a.areaLink:hover						{ text-decoration: none; color: #333; background: #efefef; }

/* foundation */
.button,
.button:visited							{ text-decoration: none; background: #666; color: #fff; }
.button:hover,
.button:focus							{ text-decoration: none; background: #333; color: #fff; }

/* content */
article									{ position: relative; width: 100%; margin: 0 auto; max-width: 77rem; padding: 1rem; padding-bottom: 2rem;
										  margin-top: -30rem; z-index: 100; background: rgba(255,255,255,.85); min-height: 30rem; }
										  
.contentSlide							{ margin-bottom: 1.5rem; }
.nomargin								{ margin-bottom: 0; }

h1, h2, h3, h4, h5, h6					{ font-family: 'Lato', sans-serif; color: #900; }

.w25									{ float: left; width: 25%; }
.w33									{ float: left; width: 33.333333%; }
.w50									{ float: left; width: 50%; }

ul.imageBlock							{ list-style: none; margin: 0; padding: 0; }
ul.imageBlock li						{ float: left; width: 33.333333%; }

.logoBlock								{ float: left; width: 20%; }
.logoBlock h4							{ color: #fff; font-size: 1rem; margin: 0; }
.logoBlock a,
.logoBlock a:visited,
.logoBlock a:focus						{ display: block; margin: .75rem; padding: .5rem .25rem; background: #666; color: #fff; text-align: center; }
.logoBlock a:hover						{ background: #333; }

.boxWrapper								{ background: #f6f3ee; padding: .5rem; margin: .75rem; }

.gmap									{ height: 30em; margin-top: 1rem; margin-bottom: 1.5rem; }
.gomapMarker							{ color: #333; width: 190px; overflow: hidden; }
.gmap img 								{ max-width: none; }
.gmap label 							{ width: auto; display: inline; }

.block .wrapper							{ margin: 1rem; text-align: center; }

pre 									{ width: 100%; padding: 5px; background: #333; overflow: auto; white-space: pre-wrap;
										  white-space: -moz-pre-wrap !important; white-space: -pre-wrap;
										  white-space: -o-pre-wrap;	word-wrap: break-word; }
code									{ background: none !important; border: 0; color: #efefef; }

#popup									{ background: rgba(255,255,255,.90); padding: 1rem; }
#popup ul 								{ list-style: circle inside url("/gfx/bullet.png"); }
#popup a.button.small.color 			{ background: orange; }

/* rooms */
.room									{ margin-bottom: 2rem; padding: .5rem; background: #eee7df; }
.roomBestprice							{ margin: 0.5em 0; }
.roomBestprice span						{ color: #900; font-size: 1.25rem; }
.roomInfo								{ padding: 1rem; }
.preistabPreis							{ font-size: 1.1rem; color: #900; }
.preistabHead,
.preistabCol							{ text-align: center; }
.preistabHead							{ background-color: #D7C2B4; }

/* anfrage */
#anfrage fieldset						{ border: 1px solid #333; }
#anfrage legend							{ padding: 0.4em 1em; background: #D7C2B4; font-size: 1.15em; font-weight: normal; }
#anfrage label							{ font-size: 1rem; }
#anfrage .mark							{ font-weight: bold; }
#anfrage textarea						{ height: 10em; }
#anfrage select 						{ width: 100%; border-radius: 0; display: block; font-size: 0.875em; margin: 0 0 1em 0; padding: 0.5em; height: 2.3125em;
								  		-webkit-appearance: none; background: white url(../gfx/down.png) top right no-repeat; border: 1px solid #cccccc; 
								  		-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
								  		color: rgba(0, 0, 0, 0.75); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
								  		-webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
								  		-moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
								  		transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
a.formZeit								{ font-weight: bold; }
label.error								{ font-size: 0.875em; margin: 0; }
#meinFeld 								{ display: none; }
.extraDate								{ background: #fff; padding: 0.25rem 0; }
.datepicker								{ background: white url(../gfx/datepicker.png) center right no-repeat; }
.ui-datepicker-calendar tr				{ background: none !important; }

/* blocks */
.contentSlide .wrapper { display: flex; flex-flow: column wrap; }
.block { text-align: center; margin: 1rem 0; padding: 1rem; }

@media only screen and (min-width: 48.0625em) {
	.contentSlide .wrapper { flex-flow: row wrap; }
}

@media only screen and (max-width: 40em) {
	.block { width: 100%; }
	.homeBlock,
	ul.imageBlock li,
	.logoBlock, .w25, .w33, .w50		{ width: 100%; }
	#homeWappen							{ position: relative; padding: 1rem; text-align: center; }
}

@media only screen and (min-width: 64.063em) {
	#homeWappen							{ top: 50%; left: 50%; margin-left: -90px; margin-top: -115px; z-index: 100; }
}

#cookieAlert {
	z-index: 9999;
	display: block;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: rgba(0,0,0,0.75);
	color: #fff;
	font-weight: 700;
	padding: 8px 8px 8px 10px;
	text-align: center;
	font-size: 0.75rem;
}

#cookieAlert button,
#cookieAlert span {
	display: inline-block;
}

#cookieAlert a,
#cookieAlert a:visited {
	color: #ccc;
}

#cookieAlert button {
	margin-left: 0.5rem;
	margin-bottom: 0;
	padding: 0.5rem 1rem;
}