@charset "utf-8";

/* # Basic ##################### */
/* html { siehe auch rte.css } */
html {
	position: relative;
	font-size: 20px;
	min-width: 15rem;
	height: 100%;
	overflow:hidden scroll;
	scroll-behavior: smooth;
}
body {
	position: relative;
	width:100%;
	height: initial;
	min-height: 100%;
	min-width: 15rem;
	margin: auto;
	padding: 0;
}

header,nav,main,footer,figure,figcaption,label,input,textarea,select,ul,ol,li,a,div,span,h1,h2,h3,p,hr,h1,h2,h3,h4,h5,h6,td {
	box-sizing: border-box;
	padding:0;
	margin:0;
}


/* # Header ##################### */
body > header {
	position:fixed;
	height:6.5rem;
	width:100%;
	z-index: 100;
	margin: 0;
	top: 0;
	background-image: url(images/bg_header.svg);
	background-repeat: repeat-x;
	filter: drop-shadow(0px 5px 5px #000A);
}
body > header .logo {
	position: absolute;
	top:.25rem;
	left:1rem;
	width: 6.5rem;
	height:5.5rem;
	z-index:1;
}
body > header .logo img { width:6.5rem; }


/* # Menu ##################### */
#menu label, header input[type="checkbox"] { display: none; }
#menu {
	position:relative;
	top:1.5rem;
	left:0;
	height:2.5rem;
	z-index:0;
	margin: auto;
	width: inherit;
	max-width: 60.5rem;
	text-align: center;
}
#menu > ul {
	position: relative;
	font-size:0.9rem;
	line-height:1.5;
	font-weight: 400;
	list-style: none;
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
}
#menu > ul > li {
	position: relative;
	margin: 0 !important;
	min-height: 2.5rem;
	vertical-align: top;
	display: inline-block;
	transition: margin .5s ease;
}
#menu > ul li > a {
	position: relative;
	display: block;
	width: initial;
	height: 100%;
	padding: .65rem 1.25rem .65rem 1.25rem;
	margin: 0;
	text-align: center;
	max-height: 3.8rem;
	overflow: hidden;
	transition:all .3s ease;
}
#menu > ul li > a:hover, #menu ul li.act > a, #menu ul li.cur > a { transform:scale(1.1); }


/* # Main ##################### */
.page,
.content > div > div,
.content > div > header,
footer .page,
form {
	position:relative;
	left: 0;
	top: 0;
	width: 100%;
	margin: auto;
	padding: 0 0.75rem;
	max-width: 60.5rem;
}

main {
	position:relative;
	display:block;
	top:0;
	left:0;
	width:100%;
	height: initial;
}

.content {
	position:relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.content > div { flex: 1 1 100%; padding: 7rem 0 0 0; min-height: 100vh; }

.content > div.frame-drk { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.1)); } /* dunkler */
.content > div.frame-sw { background-color: rgb(0,0,0); }
.content > div.frame-bl { background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.4)) var(--col_bl); }


/* # RTE-Fixes ##################### unused
.col_ws, .col_ws a, a .col_ws, .col_ws a *, a .col_ws * { color: rgb(255,255,255); }
*/


/* # Footer ##################### */
footer {
	position:absolute;
	left:0em;
	height: 13rem;
	width:100%;
	padding: 2.5rem 0 0 0;
	box-shadow: 0 -10px 10px rgba(0,0,0,.2);
}
footer .content { margin:auto; max-width: 64rem;  }


/* # ToTop ##################### */
body > div.totop {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	top: auto;
	left: auto;
	width: 2rem;
	height: 4rem;
	padding: .1rem 0 0 0;
	margin: 0;
	text-align: center;
	background-color: var(--col_text);
	border-radius: 1rem;
	transition: all .3s ease;
	z-index:1;
}
body > div.totop a::before {
	content:'';
	background-image: url(images/totop_rt.svg);
	background-repeat: no-repeat;
	background-size: 2rem 1.3rem;
	background-position: 0 .2rem;
	display: block;
	width: 2rem;
	height:2rem;
	font-size: 1.6rem;
	line-height: 1;
}
body > div.totop a[href="#bottom"]::before {
	background-image: url(images/tobottom_rt.svg);
}
body > div.totop a {
	position: relative;
	display: block;
	top:0;
	right: 0;
	width:2rem;
	height:2rem;
	text-align: center;
	font-size: 0.8rem;
	color: rgb(255,255,255) !important;
}
body > div.totop:hover { bottom:1rem; }


/* Tabellen */
table {	border-spacing: 0; }
table img { max-width:initial; }
.table { display:table; }
.td { display:table-cell; vertical-align:middle; font-family: "Radio Canada", Arial, Helvetica, sans-serif; }


/* # Formulare ##################### */
form { padding: 1rem; margin: auto; width: 99%; max-width: 40rem; }
fieldset { border: 1px solid rgba(255,255,255,.2); border-radius:.5rem; }
legend { font-size:.55rem; color:rgba(255,255,255,.5); }
input,textarea,select,option,label,button { font-family: "Radio Canada", Arial, Helvetica, sans-serif; }

form > *, form > fieldset > * { margin:.2rem 0; }
form h2 { text-align:center; margin:2rem 0 1rem 0;}

label { display:inline-block; width:30%; padding: 0 .5rem 0 0; text-align:right; font-size:.8rem; color:rgb(255,255,255); }
label[for*='radio'], label[for*='checkbox'] { width: 29rem; text-align:left; }
/* label[for*='radio']::before { content:''; position: absolute; width:2rem; height:2rem; background-color: rgb(255,255,255); } */

input,textarea { width: 70%; height:1.6rem; font-size:.8rem; padding:.3rem; border:1px solid var(--col_base); border-radius:.15rem; }
.input { display:inline-block;}
input[type='radio'], input[type='checkbox'] { width: 2rem; vertical-align: bottom; }

/* Button */
*[class*="But_"], button  {
	position: relative;
	display: inline-block;
	height:1.6rem;
	padding: 0 .2rem;
	margin: .5rem 0 0 0;
	font-size:1.1rem;
	line-height:1.3;
	color:rgb(255,255,255);
	border:1px solid rgb(64, 17, 15);
	border-radius:0.15rem;
	box-shadow:0 5px 4px rgba(0,0,0,.2);
	cursor:pointer;
	transition:all .3s ease;
	background-color: rgb(102, 32, 29);
}
*[class*="But_"] > div  { padding: 0; transition:all .3s ease; }
*[class*="But_"] > div:hover, *[class*="But_"]:hover, button:hover { background-color: rgba(255,255,255,.5);  }
*[class*="But_"] a { color:rgb(79,105,118); display:block; padding: .5rem 1rem; transition:all .3s ease; }
*[class*="But_"] a:hover, *[class*="But_"]:hover, button:hover { color:rgb(0,0,0) !important; }

.But_100 { width: 100%; }
.But_mini { font-size:0.65rem; width:1.2rem; height:1.2rem; margin:0; }
.But_edit { width:2rem; height:2rem; background-image:url(images/icon_edit_ws.svg); }
.But_edit:hover { background-image:url(images/icon_edit_sw.svg); }

/* # Responsive ##################### */
@media all and (max-width: 1320px) {
	footer .page { padding:auto 1rem;  }
}
@media all and (max-width: 1024px) {
	#menu > ul li > a { padding:.65rem; }

	.map { margin: -10rem 0 0 0; }
	.map > div:nth-of-type(2) { top:10rem; }
}
@media all and (max-width: 980px) {
	.Spalten_25_25_25_25,
	main .Spalten_50_50 div[class^="Spalte"]  { flex-flow: row wrap; margin: auto 0; }
	main .Spalten_50_50 div[class^="Spalte"] > div { flex: 1 1 100%; margin: 0 0 1.5rem 0; padding-left:0; padding-right:0; }
	.Spalten_25_25_25_25 > div { flex:0 1 50%; margin: 0 0 1.5rem 0; }

	.map { margin: -6rem 0 0 0; }
	.map > div:nth-of-type(2) { left:1rem; top:6rem; }
}
@media all and (max-width: 870px) {
	footer .Bild_links, footer .Bild_rechts { float:none; display:block; margin:0 0 .6rem 0; }
	.Spalten_66 { flex:0 1 100% !important; margin: auto 0; }
	.Spalten_66 > div { flex:0 1 100% !important; margin: 0 0 1.5rem 0; padding-left:0; padding-right:0; }
}
@media all and (max-width: 899px) {
	#top { padding: 0; }
	body > header { position: sticky; }
	main { padding: 0; margin: -2rem 0 0 0; }

	#menu > ul li > a {
	  width: 100%;
	}
	#menu {
		left: 11rem;
		top: 1rem;
		width: 9rem;
		padding: .0rem 0;
		height: initial;
		min-height: 2.5rem;
		margin: 0;
	}
	#menu label {
		position:absolute;
		display: block;
		left:-2rem;
		width:2.4rem;
		height:2.4rem;
		color:rgb(51,51,51);
		transition:all .5s ease;
	}
	#menu > label span {
		position: absolute;
		left: .3rem;
		width:1.8rem;
		height:.3rem;
		border-radius:.2rem;
		background-color: var(--col_text);
		white-space:pre;
		cursor:pointer;
		transition:all .5s ease;
	}
	#menu > label  { transform: rotateZ(0deg); }
	#menu > label span:nth-of-type(1) { top:0.4rem; transform: translateY(0rem) rotateZ(0deg); }
	#menu > label span:nth-of-type(2) { top:1rem; transform: rotateZ(0deg); }
	#menu > label span:nth-of-type(3) { top:1.6rem; transform: translateY(0rem) rotateZ(0deg); }
	#menu > ul { top:2rem; left:0; overflow: hidden; height: auto; border-radius: 0 0 1rem 1rem; background-color: rgba(255,255,255,.9);}
	#menu > ul > li { padding:0; margin:-4rem 0 0 0 !important; display: block;float: none;width: 100%;}
	#menu > ul > li > a { display: block; padding:.75rem 0; background-color: var(--col_base); }

	#chkmenu:checked ~ label span { width:1.6rem; }
	#chkmenu:checked ~ label span:nth-of-type(1) { transform: translateY(0.6rem) rotateZ(-45deg); }
	#chkmenu:checked ~ label span:nth-of-type(2) { transform: rotateZ(45deg); }
	#chkmenu:checked ~ label span:nth-of-type(3) { transform: translateY(-0.6rem) rotateZ(-45deg); }
	#chkmenu:checked ~ ul > li { margin:.0rem 0 0 0 !important; }

	.map { margin: -2rem 0 0 0; }
	.map > div:nth-of-type(2) { top:2rem; }

	.partner > div { flex: 1 1 20%; }
}
@media all and (max-width: 740px) {
	.Spalten_33_33_33  { flex-flow: row wrap; margin: auto 0; }
	.Spalten_33_33_33 > div { flex:0 1 100%; margin: 0 0 1.5rem 0; padding-left:0; padding-right:0; }
}
@media all and (max-width: 675px) {
	.Spalten_50_50, main .Spalten_33_66  { flex-flow: row wrap; margin: auto 0; }
	.Spalten_50_50 > div, main .Spalten_33_66 > div { flex:0 1 100% !important; margin: 0 0 1.5rem 0; padding-left:0; padding-right:0; }

	footer .Spalten_50_50 .Spalten_50_50  { flex-flow: row nowrap; margin: auto 0; }
	footer .Spalten_50_50 .Spalten_50_50 > div { flex:0 1 50% !important; margin: 0 0.75rem; padding-left:0; padding-right:0; }
}
@media all and (max-width: 639px) {
	.map { margin: -6rem 0 6rem 0; }
	.map > div:nth-of-type(1) { top:8rem; }
	.map > div:nth-of-type(2) { top:6rem; }
	.map > div:nth-of-type(3) {	margin: 10rem 0 0 0; }

	.Bild_links, .Bild_rechts { clear:both; float:none; margin: 1rem 0; }
	.Bild_70 { max-width: 100%; }

	.eventEntry span:nth-of-type(3) { float:none; display:block; text-align: right; }
}
@media all and (max-width: 579px) {
	.map { margin: -2rem 0 10rem 0; }
	.map > div:nth-of-type(1) { top:11rem; }
	.map > div:nth-of-type(2) { top:2rem; box-shadow: 5px 20px 20px rgba(0,0,0,.25); }
	.map > div:nth-of-type(3) {	margin: 13rem 0 0 0; }	
}
@media all and (max-width: 480px) {
	.Spalten_25_25_25_25  { flex-flow: row wrap; margin: auto 0; }
	.Spalten_25_25_25_25 > div { flex:0 1 100% !important; margin: 0 0 1.5rem 0; padding-left:0; padding-right:0; }

	.map { margin: -2rem 0 10rem 0; }
	.map > div:nth-of-type(1) { top:12rem; }
	.map > div:nth-of-type(2) { top:2rem; box-shadow: 5px 10px 20px rgba(0,0,0,.25); }
	.map > div:nth-of-type(3) {	margin: 14rem 0 0 0; }

}
@media all and (max-width: 399px) {
	#menu {
		left: 0rem;
		width:100%;
	}
	#menu label {
		right:inherit;
		left:7.5rem;
	}
	#menu > ul {
		top:2.5rem;
		left:0rem;
		overflow: hidden;
		box-shadow: 0px 5px 5px rgba(0,0,0,.7);
		height: auto;
		background-color: rgba(255,255,255,.9);
	}

	form > div { margin:.2rem 0; }
	label { width:100%; padding: 0 .5rem .2rem 0; text-align:left; }
	input,textarea { width: 100%; }

	.partner > div { flex: 1 1 50%; }
	
	.ordering { right:4rem; }
	.ordering a { font-size:1rem; }
}


/* # Backend ##################### */
.bemenu {
	width: 100%;
	max-width: 60rem;
	margin: auto;
	border-bottom:1px solid rgb(255,255,255);
}
.bemenu li {
	display: inline-block;
	padding: .5rem; 
	background: linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.3)) var(--col_base);
	border-radius: 1rem 1rem 0 0;
	box-shadow: -1px -1px 3px rgba(0,0,0,.5);
}
.bemenu li.act {
	background: linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.2)) var(--col_base) rgba(255,255,255,.3);
}

.message {
	color:rgb(0,200,0);
	font-weight:bold;
	animation: hideit 1s 2s ease forwards;
}
@keyframes hideit {
	0% { opacity:1; }
	100% { opacity:0; }
}