/* 1.0 | hannes | 2006-10-03 | template */
body {
	margin: 0;
	background-color: #FFE7B5;
}
h1 { 
	font-size: 21px;
	margin: 0;
	padding: 1em 0; /* x firefox */
}
h2 { font-size: 12px; }

#header, #maincontainer, #copyright, #footer {
	width: 824px;
	margin: 0 auto;
	text-align: left;
	border-right: 2px solid white;
	border-left: 2px solid white;
}

.button {
	background-color: #f6ae1e;
	color: #fff;
	padding: 0.75em;
	margin: 0 0.5em;
	font-weight: bold;
	font-size: 1.25em;
	text-transform: uppercase;
	text-decoration: none;
}
.button:hover {
	background-color: #7c492e;
	color: #fff;
}

/* PAGENAV */
.pagenav { text-align: center; }
.pagenav span a {
	font-size: 17px;
	vertical-align: bottom;
	padding: 0 2px;
}
.pagenav a, .pagenav strong {
	margin: 2px;
	padding: 2px;
}
.pagenav a:hover, .pagenav strong {
	border: 1px solid;
	margin: 1px;
}
.pagenav a, .pagenav a:hover { text-decoration: none; }
.pagenav a:hover { border-style: dotted; }

/* HEADER */
#headercontainer {
	background-color: #FFF3CB;
	height: 395px;
	width: 828px;
	position: relative;
	margin: 0 auto;
}
#header {
	background: url(/grafik/header_bg.png) no-repeat left top;
	height: 395px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}
#logo {
	clear: both;
	height: 110px;
}
#logo img {
	float: left;
	margin-left: 180px;
}
#languageselect { 
	float: right;
	padding: 5px;
}
#languageselect img { 
	margin: 5px 5px 0 0;
	border: 1px solid white;
}

#panoramabild {
	height: 270px;
	left: 205px;
	overflow: hidden;
	position: absolute;
	top: 110px;
	width: 622px;
	z-index: 1;
}

/* MAINCONTAINER */
#maincontainer { 
	background: url(/grafik/maincontainer_bg.gif) repeat-y right top;
	min-height: 340px;
}
#adresse { 
	float: left;
	width: 202px;
	font-size: 11px;
	margin: 0 0 40px 14px;
	line-height: 140%;
}
#adresse a { color: #684D1E; }
#adresse .social { margin-top: 2em; }
#adresse .social a {
	display: inline-block;
	margin-left: 1em;
}
#adresse .social a:first-of-type { margin-left: 0; }
#adresse .social img {
	height: 30px;
}

#angebot, #wetter {
	background-color: #F8B32A;
	border: 1px solid #FFF;
	line-height: 130%;
	margin-bottom: 1em;
	margin-left: -10px;
	padding: 5px 5px 5px 12px;
	width: 175px;
}
#angebot h2 { margin: 5px 0; }
#angebot ul { padding-left: 12px; }

.covidbutton { width: 174px; }
.covidbutton .button {
	display: inline-block;
	box-sizing: border-box;
	color: #fff!important;
	font-size: 1em;
	margin: 0;
	margin-top: 1.5em;
	text-align: center;
	width: 100%;
	padding: 0.5em;
}

@media only screen and (max-width: 600px) {
	.covidbutton {
		width: 100%;
		max-width: 260px;
		margin: 0 auto;
		margin-top: 1em;
	}
}

/* Hint */
#hint-container {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	max-width: 275px; width: 100%;
	position: absolute; left: 62%; top: 170px; z-index: 999;
	transform: rotate(15deg);
	overflow: hidden;
}
#hint-inner {
	color: #000;
}
#hint-title { 
	background: #d2ac67;
	color: #FFF;
	font-size: 1.6em;
}
#hint-content { 
	font-size: 1.05em;
	overflow-y: hidden; overflow-x: hidden;
}
#hint-content img { 
	width: 100%; 
	height: auto;
}
#hint-content > p:first-child { margin-top: 0; }
#hint-content > p:last-child { margin-bottom: 0; }
#hint-content p { line-height: 1.4em; }
#hint-content a {
	color: #000;
	text-decoration: underline;
}
#hint-content a.button	 {
	display: inline-block;
	margin-left: 0;
	padding: 10px;
	background-color: #d2ac67;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.25s ease-out;
}
#hint-content a.button:hover {
	color: #FFF; 
}
#hint-content a:hover { color: #d2ac67; }
#hint-closer {
	background: #f6ad1a;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	color: #8C191C;
	height: 32px;
	padding: 2px 5px 8px;
	position: absolute; right: 25px; top: 15px; z-index: 1;
	text-align: center;
	width: 32px;
}
#hint-closer img { width: 100%; height: auto; }
#hint-content b {
	color: #d2ac67;
    display: block;
	font-size: 1.2em;
	margin: 1em 0;
    text-align: center;
}

@media only screen and (max-width: 830px) {
	#hint-container {
		max-width: calc(31vw - 40px);
		left: 72%;
	}
}

@media only screen and (max-width: 650px) {
	#hint-container {
		max-width: 31vw;
		left: 65%;
	}
}

@media only screen and (max-width: 450px) {
	#hint-container {
		display: none;
	}
}



/* WETTER BOX */
#wetter {
	cursor: pointer;
	padding: 0;
	width: 194px;
}
#wetter td {
	font-size: 10px;
	padding: 3px 0;
	text-align: center;
	vertical-align: middle;
}
#wetter th {
	text-align: left;
	padding: 5px 0 5px 5px;
	font-weight: bold;
	white-space: nowrap;
}

#content {
	width: 570px; /* kein float right|left x firefox hintergrundbild von maincontainer */
	margin-left: 225px;
	line-height: 140%;
}
#content h1 {
	line-height: 24px;
	margin: 0;
	padding: 0.5em 0;
	font-weight: 500;
}
#content h2 {
	margin: 0;
	padding: 1em 0;
}
#content blockquote {
	margin: 0;
	padding: 10px;
	background: #FEE3AB;
	border: 1px solid #EFC678;
}
#content blockquote h2 { margin-top: 0; padding-top: 0; }
#footer {
	background-color: #FFF;
	height: 70px;
	border-top: 6px solid #FFF; 
}
#footer a {
	display: inline-block;
	overflow: hidden;
	height: 60px;
	background-color: #FFF;
}
#footer .nocturnes {
	margin: 0 10px;
	width: 170px;
	float: left;
}
#footer .naturns { 
	width: 143px;
	float: right;
}
#footer .suedtirol {
	float: right;
	width: 100px;
	margin-right: 10px;
	margin-left: 10px;
}

/* MENU */
#menu {
	background-color: #FFC449;
	border-bottom: 1px solid #FFF;
	float: left; 
	width: 202px;
	height: 330px;
	vertical-align: baseline;
}
#menu a:first-child { padding-left: 0; }
#menu a { 
	color: #653200;
	font-family: 'augieregular';
	font-size: 1.2em;
    font-weight: 600;
	padding-left: 10px;
    text-decoration: none;
	text-shadow: 2.9px 1.8px 1.9px rgba(95, 88, 88, 0.3);
}
#menu hr {
	border-top: 1px solid #FEE7b5;
    border-bottom: none;
}
/* COPYRIGHT */
#copyright {	
	background: url(/grafik/maincontainer_bg.gif) repeat-y right top;
	width: 824px;
	color: #684D1E;
	margin: 0 auto;
	padding: 2px 0;
	clear: both;
	vertical-align: bottom;
	font: 10px Arial, Helvetica, sans-serif;
}
#copyright a { color: #684D1E; text-decoration: none; }
#copyright a:hover { text-decoration: underline; }

/* KLASSEN */

/* TABELLEN */
.tabelle { 
	margin: 1.5em 0;
	clear: right;
}
.tabelle td, .tabelle th { padding: 2px; }
.tabelle td { 
	text-align: center;
	background-color: #FDE3A2;
}
.tabelle th {
	padding: 4px;
	white-space: nowrap;
	font-weight: bold;
	text-align: center;
	background-color: #FCDB8E;
	vertical-align: middle;
}

/* BILDBOXEN */
.imageboxright {
	float: right;
	height: auto;
	max-width: 310px;
	margin-left: 10px;
	font-size: 11px;
	text-align: center;
	width: 100%;
}
.imagecycle {
	height: 400px;
	margin: 1.5em 0 0 0;
	overflow: hidden;
	width: 100%;
}
.imageboxright a img {
	height: 100%;
	max-width: 300px; width: 100%;
}


/* RESPONSIVE */
#languageselect img { height: 10px; width: 17px; }
#content {
	float: right;
	margin:0!important;
	width: calc(100% - 216px);
}
#adresse {
	float: left;
}
#merancard {
	display: block;
	margin-bottom: 1em;
}
#merancard img {
	width: 175px;
	height: auto;
}
#request, #phone, #mail, #showmobilemenu { display: none!important; }
#request, #phone, #mail { 
	border-radius: 50%;
	background: #E89C03;
	color: #FFF!important;
	height: 50px; width: 50px;
	text-align: center;
	bottom: 18px; 
	position: fixed;
	z-index: 1000;
}
#request:hover, #phone:hover, #mail:hover { background: #E87503; }
#phone { right: 130px; }
#mail { right: 70px; }
#request { right: 10px; }
#showmobilemenu {
	position: absolute;
    background-color: #E87503;
	color: #FFF;
	cursor: pointer;
    height: 40px; width: 40px;
	left: 10px; top: 10px;
    text-align: center;
    z-index: 1000;
}
#showmobilemenu:hover { background-color: #E88B05; }
.material-icons {
	font-size: 28px;
	margin-top: 50%;
	transform: translateY( -50% );
}
.tablecontainer { overflow: auto; }
@media only screen and (max-width: 830px) {
	.jquery-lightbox-move { width: 75%; }
	.jquery-lightbox, .jquery-lightbox-buttons, .jquery-lightbox-background { 
		height: auto!important;
		max-width: 530px; width: 100%!important; 
	}
	#header, #maincontainer, #copyright, #footer {
		border: none;
		max-width: 830px;
		width: 100%!important;
		z-index: -2!important;
	}
	#headercontainer {
		height: 47vw;
		max-width: 828px;
		width: 100%!important;
	}
	#header { 
		height: 365px; 
		position: absolute;
		z-index: 999!important;
	}
	#panoramabild {
		left: 215px;
		height: 32vw;
		max-width: 622px;
		width: 69%; width: calc(100% - 215px);
	}
	#panoramabild img { 
		width: 100%; height: auto; 
	}
	#maincontainer, #header, #headercontainer, #copyright { background: none; }
	#menuimage { display: none; }
	#content { 
		padding: 10px;
		width: calc(100% - 235px);
	}
	#logo { 
		background-color: #F8B32A;
		text-align: center;
	}
	#logoimage { 
		float: none!important;
		height: auto;
		margin-left: 0!important;
		margin-top: 20px;
		max-width: 350px; width: 100%;
	}
	#menu {
		border: none;
		height: 280px;
		width: 215px;
		z-index: 999;
	}
	#menu hr:first-child { margin-top: 30px; }
	#adresse { 
		background: #FFC449;
		box-sizing: border-box;
		margin: 0;
		padding: 7px;
		min-height: 720px;
		width: 215px;
		z-index: -2;
	}
	#angebot {
		margin-top: 80px;
	}
	#angebot, #wetter { margin-left: 0; }
	.imagecycle { height: 47vw; }
	.imagecycle a img { 
		height: auto;
		width: 100%!important;
	}
	#footer {
		box-sizing: border-box;
		height: 90px;
		padding: 15px;
	}
	#languageselect {
		float: none;
		position: absolute;
		right: 0;
		top: -5px;
	}

}
@media only screen and (max-width: 685px) {
	#news {
		box-sizing: border-box;
		float: none!important;
		margin: 10px 0!important;
		width: 100%!important;
	}
}
@media only screen and (max-width: 585px) {
	#logoimage {
		margin-top: 25px;
		width: 300px;
	}
	#adresse {
		min-height: 690px;
	}
}
@media only screen and (max-width: 650px) {
	#request, #phone, #mail, #showmobilemenu { display: block!important; }
	#header.mobilemenu #menu { left: 0; }
	body.showmobilemenu #panoramabild, body.showmobilemenu #maincontainer, body.showmobilemenu #copyright, body.showmobilemenu #footer { display: none; }
/*	body.showmobilemenu { background-color: #FFC449; }*/
	#header.mobilemenu { height: 100vh; }
	#headercontainer.mobilemenu { height: auto; }
	#menu {
		bottom: 0;
		left: -560px;
		height: auto;
		position: absolute;
		transition: left 0.5s ease-in-out; -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out;
		width: 100%;
		top: 110px;
		z-index: 200;
	}
	#menu hr { 
		border: none;
		height: 5px;
	}
	#menu a { font-size: 1.6em; }
	#header { height: auto; z-index: 100!important; }
	#panoramabild {
		left: 0;
		height: 42vw;
		overflow: inherit;
		width: 100%!important;
	}
	#headercontainer { height: 60.7vw; }
	#panoramabild { max-width: 650px; }
	#footer { margin-bottom: 90px; }
	#angebot {
		margin-top: 10px;
	}
}
@media only screen and (max-width: 600px) {
	#content {
		box-sizing: border-box;
		float: none;
		width: 100%;
	}
	#adresse {
		text-align: center;
		background: none;
		margin-bottom: 3em;
		min-height: auto;
		width: 100%;
	}
	#angebot, #wetter {
		box-sizing: border-box;
		width: 100%;
	}
	#angebot { text-align: left; }
	#wetter { padding: 10px; }
}
@media only screen and (max-width: 500px) {
	#headercontainer { height: 65vw; }
	#footer { display: none; }
	#copyright { margin-top: 3em; }
}
@media only screen and (max-width: 495px) {
	#content input[type=text], #content select, #content fieldset label { display: block!important; }
	#content input[type=submit] { margin-left: 0!important; }
	#content fieldset label { text-align: left!important; }
	#content .inputxl { max-width: 350px; width: 100%!important; }
	.hidelink, .hidelinkhidden { margin-top: 1em; }
}
@media only screen and (max-width: 465px) {
	#logoimage { margin-left: 20px!important; }
}
@media only screen and (max-width: 425px) {
	#headercontainer { height: 70vw; }
	#logoimage {
		margin-top: 20px;
		width: 280px;
	}
}
@media only screen and (max-width: 415px) {
	.imageboxright { 
		float: none;
		margin: 0 auto; 

	}
}
@media only screen and (max-width: 390px) {
	#logoimage {
		margin-top: 23px;
		width: 240px;
	}
}
@media only screen and (max-width: 350px) {
	#logoimage { margin-left: 45px!important; }
	#headercontainer { height: 75vw; }
}