@charset "utf-8";
@font-face{ font-family:"Radio Canada"; font-style:normal; font-weight:300 700; font-display:block; src:url('fonts/RadioCanada-VariableFont_wdth,wght.woff2') format('woff2'); font-stretch:normal;}
@font-face{ font-family:"Arsenal"; font-style:normal; font-weight:400; font-display:block; src:url('fonts/Arsenal-Regular.woff2') format('woff2'); font-stretch:normal;}

/* Globals */
:root {
	--col_base: rgb(102,32,29);
	--col_link: rgb(255,255,255);
	--col_linkhover: rgb(255,206,204);
	--col_text: rgb(255,255,255);
	--col_bl: rgb(62,88,142);
	accent-color:rgb(102,32,29);	
}
body {
	font-family: "Radio Canada", Arial, Helvetica, sans-serif;
	font-weight:300;
	line-height:1.5;
	color:var(--col_text);
	background-color:var(--col_base);
}
::placeholder { color:rgb(153,102,102); font-size:.6rem; }


/* # Links ##################### */
a { color:var(--col_link); text-decoration:none; outline:0; transition:color .3s ease; }
a:hover { color:var(--col_linkhover); outline:0; }
a img { border:0; }		   
a[href^="javascript"] span {
	display: inline-block;
	width: .9em;
	height: .9em;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(images/at_WS.svg);
	vertical-align:middle;
}
a[href^="javascript"]:hover span { background-image: url(images/at_WS.svg); }


/* Tags */
hr { height:0; border:0; border-top:2px solid var(--col_text); margin:0.4em 0 0.5em 0; clear:both; }
img, video { 
	display:initial;
	vertical-align:middle;
	max-width:100%; 
	height: initial !important;
	border-radius:.2rem;
}
ul, .content ul { padding: 0 0 0 1em; }
label { cursor:pointer; }
figcaption { font-size: 0.8rem; line-height:1.4em; }


/* Styles */
h1 {
	font-family: "Arsenal", Arial, Helvetica, sans-serif;
	font-weight:400;
	font-size: 3em;
	line-height:1.2;
}
h2 {
	font-family: "Radio Canada", Arial, Helvetica, sans-serif;
	font-weight:700;
	font-size: 1.2em;
	line-height:1.4;
}
h2::after {
	content: '';
	display: block;
	width:100%;
	height: 0;
	padding: 0 0 2% 0;
	margin: 0 0 1rem 0;
	background: url(images/waveline.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 0em;
	filter:drop-shadow(1px 3px 2px rgba(0,0,0,.5))
}
.frame h2 {
	font-size: 2em;
}
.frame-bl h2::after { 
	background: url(images/waveline_ge.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 0em;
}
h3 {
	font-family: "Radio Canada", Arial, Helvetica, sans-serif;
	font-weight:700;
	font-size: 0.8em;
	line-height:1.75;
}
h4 {
	font-family: "Radio Canada", Arial, Helvetica, sans-serif;
	font-weight:700;
	font-size: 0.7em;
	line-height:1.75;
}

.p_bold, strong { font-family: "Radio Canada", Arial, Helvetica, sans-serif; font-weight:700; }

.text-left, .p_left { text-align:left; }
.text-center, .p_center { text-align:center; }
.text-right, .p_right { text-align:right; }
.text-justify, .p_justify { text-align:justify; }
.indent { padding-left:1rem; }

.t_right { display:block; float:right; }
.t_left { display:block; float:left; }
.t_clear { clear:both; }
.t_iblock { display:inline-block; }

.p_pad { font-size:0.5rem; line-height:1.2; }
.p13 { font-size:0.65rem; line-height:1.5; }
.p16 { font-size:0.8rem; line-height:1.5; }
.p18 { font-size:0.9rem; line-height:1.5; }
.p20 { font-size:1rem; line-height:1.5; }
.p24 { font-size:1.2rem; line-height:1.5; }
.p28 { font-size:1.4rem; line-height:1.2; }
.p40 { font-size:2rem; line-height:1.2; }

.p_shadow { text-shadow: 0 3px 3px rgb(0,0,0); }
.d_shadow { filter: drop-shadow(1px 2px 7px rgba(255,255,255,.7)); }

.w2 { width: 2rem; }
.w4 { width: 4rem; }
.w7 { width: 7rem; }
.w15 { width: 15rem; }
.w30 { width: 30rem; }
.w100p { width: 100%; }
.w75p { width: 75%; }
.w60p { width: 60%; }
.w50p { width: 50%; }
.w25p { width: 25%; }
.w15p { width: 15%; }
.wini { width:initial; }

.Hintergrund_RT { background-color: var(--col_base); padding: .6rem; border-radius:0.15rem; }
.Hintergrund_WS { background-color: rgb(255,255,255); padding: .6rem; border-radius:0.15rem; }

.bg_img1 { background-image: url(media/bg_img1.jpg); background-attachment: fixed; }

.col_rt { color:var(--col_base); }
.col_ws { color: rgb(255,255,255); }

.box_shad { box-shadow:3px 5px 3px rgba(0,0,0,.5); }
.box_shad_ins { position: relative; }
.box_shad_ins::after { 
	content:'';
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	box-shadow:3px 5px 10px rgba(0,0,0,.8) inset; 
}

.Bild_links { float:left; display:block; margin-right:01rem; }
.Bild_rechts { float:right; display:block; margin-left:1rem;  }
.Bild_rund { border-radius:100%; }
.Bild_drops { filter: drop-shadow(7px 8px 5px rgba(0,0,0,.5)); }
.Bild_70 { max-width: 70%; }

.sticky_bottom {
	position: sticky;
	height:0;
	bottom: 3rem;
	margin: 0 1rem 0 0;
}

.hyph { hyphens:auto; }

.pointer { cursor:pointer; }
.hide { display:none; }
.clearfix { clear:both; }


/* # Spalten ##################### */
.Spalten_33_33_33, 
.Spalten_33_66, 
.Spalten_66_33, 
.Spalten_50_50, 
.Spalten_25_25_25_25, 
.Spalten_25_75, 
.Spalten_75_25, 
.Spalten_66  {
	display:flex;
	flex-flow: row nowrap;
	margin: auto -.7rem;
	justify-content: center;
}
.Spalten_33_33_33 div[class^="Spalten"], 
.Spalten_33_66 div[class^="Spalten"], 
.Spalten_66_33 div[class^="Spalten"], 
.Spalten_50_50 div[class^="Spalten"], 
.Spalten_25_25_25_25 div[class^="Spalten"],
.Spalten_25_75 div[class^="Spalten"],
.Spalten_75_25 div[class^="Spalten"],
.Spalten_66 div[class^="Spalten"] { 
	margin: auto -0.7rem;
}
.Spalten_33_33_33 > div, 
.Spalten_33_66 > div, 
.Spalten_66_33 > div, 
.Spalten_50_50 > div, 
.Spalten_25_25_25_25 > div, 
.Spalten_25_75 > div, 
.Spalten_75_25 > div, 
.Spalten_66 > div {
	position: relative;					
	padding-left: 0.7rem;
	padding-right: 0.7rem;
}
.Spalten_33_33_33 > div,
.Spalten_33_66 > div:nth-of-type(2n-1),
.Spalten_66_33 > div:nth-of-type(2n)
{
	flex:0 1 33.3333%;
}
.Spalten_66_33 > div:nth-of-type(2n-1),
.Spalten_33_66 > div:nth-of-type(2n),
.Spalten_66 > div {
	flex:0 1 66.6666%;
}
.Spalten_50_50 > div {
	flex:0 1 50%;
}
.Spalten_25_25_25_25 > div,
.Spalten_25_75 > div:nth-of-type(1),
.Spalten_75_25 > div:nth-of-type(2) {
	flex:0 1 25%;
}
.Spalten_25_75 > div:nth-of-type(2),
.Spalten_75_25 > div:nth-of-type(1) {
	flex:0 1 75%;
}

/* # Spalten - Flex ##################### */
.flex_50_50 { display:flex; flex-flow: row wrap; justify-content:left; }
.flex_50_50 > * { flex:0 1 50%; }
.flex_50_50 label { width: 80%; }



/* # Spezials #################################################################################### */

/* # Social ##################### */
.socialicon { display:inline-block; height:1.2rem; vertical-align: top; }
/* TMPoff
.social { display:none; position: absolute; right:1rem;  }
header .social { top:1.5rem; }
.social li { display: inline-block; }
*/


/* # Language ##################### */
.language { 
	position: absolute;
	top:1.5rem;
	right:1rem;
	width: 1.2rem;
	height:1.2rem;
	overflow: hidden;
	font-size: 0.65rem;
	list-style: none;
	transition:height .5s ease;
	width: 1.2rem;
}
.language:focus, .language:hover, .language:active { height:6rem; }
.language li a { position: relative; display: block; height: 1.2rem; }
.language li:last-of-type { 
	position: absolute; 
	top:0;
	height: 1.2rem; 
	width:100%;
	z-index: 1;
}


/* # Locaion - Edit ##################### */
.hidefollow + * { display:none; }


/* # Preisliste - Edit ##################### */
.pricetab form { max-width: 100%; padding: 1rem 0; margin: 0; }
.pricetab table, .pricetab input, .pricetab select { width: 100%; height:1.2rem; font-size: .7rem; }
.pricetab input, .pricetab select { padding: .1rem .3rem; }
.pricetab input[type="checkbox"] { height:1rem; width:1rem; padding:0; }
.pricetab input, .pricetab select { border: 1px solid rgb(220,220,220); background-color:#e0e0e0; }
.pricetab input:placeholder-shown { background-color:transparent; border-color:transparent; }
.pricetab select { cursor:pointer; }
.pricetab th select { background-color: transparent; color: var(--col_text); border: 0; font-weight: bold;}
.pricetab th select option { color: rgb(0,0,0); background-color: #e0e0e0; }
.pricetab td { position: relative;  padding: .05rem; vertical-align:top;}
.pricetab tr > *:nth-child(1) { width: 5rem; }
.pricetab tr > *:nth-child(1) div { position:absolute; display:none; width: 100%; z-index: 1; }
.pricetab tr > *:nth-child(1) div span { display:inline-block; }
.pricetab tr:hover > *:nth-child(1) div { display:block; }
.pricetab tr > *:nth-child(2) { width: 1rem; }
.pricetab tr > *:nth-child(3) { width: 1rem; }
.pricetab tr > *:nth-child(4) { width: 7rem; }
.pricetab tr > *:nth-child(5) { width: 7rem; }
.pricetab tr > *:nth-child(6) { width: 14rem; }
.pricetab tr > *:nth-child(7) { width: 10rem; }
.pricetab tr > *:nth-child(8) { width: 3.5rem; }
.pricetab tr > *:nth-child(9),
.pricetab tr > *:nth-child(10) { width: 3rem; }
.pricetab tr > *:nth-child(9) input,
.pricetab tr > *:nth-child(10) input { text-align: right; }
.pricetab tr:hover td input, .pricetab tr:hover td select { background-color:rgb(255,255,255); }

.pricetab td input:nth-of-type(2),
.pricetab td input:nth-of-type(3) { height:0; padding:0 .3rem; border:0; width: 100%; display:block; transition: all .3s 0s ease; }
.pricetab td input:nth-of-type(2)::placeholder, 
.pricetab td input:nth-of-type(3)::placeholder { color:transparent; }

.pricetab label { width:initial; }
.pricetab #chkLang { display:none; }
.pricetab tr:hover td input:nth-of-type(2), 
.pricetab tr:hover td input:nth-of-type(3), 
.pricetab tr td input:nth-of-type(2):focus, 
.pricetab tr td input:nth-of-type(3):focus, 
.pricetab #chkLang:checked ~ form td input[type='text'],
.pricetab #chkLang:checked ~ form td select { height:1.2rem; padding:.3rem; border:1px solid rgb(220,220,220); background-color:rgb(255,255,255); }
.pricetab #chkLang:checked ~ form td select { padding: .1rem .3rem; }
.pricetab tr:hover td input:nth-of-type(2), 
.pricetab tr:hover td input:nth-of-type(3) { transition: all .3s 2s ease;}
.pricetab #chkLang:checked ~ form td input[type='text'] { transition: all .3s 0s ease;}
.pricetab #chkLang:checked + p label[for='chkLang'] { font-weight:bold; }
.pricetab tr:hover td input::placeholder, 
.pricetab td input:nth-of-type(2):focus::placeholder, 
.pricetab td input:nth-of-type(3):focus::placeholder { color:rgb(153,102,102); }

.but_onoff {
	margin: 0;
	width: 90%;
	font-size:.65rem;
	color:rgb(255,255,255);
	border:0;
	background-color:rgba(255,255,255,.2);
}


/* # Allegene ##################### */
#allergen, #additive { 
	position: fixed;
	top:10%;
	left:5%;
	width: 90%;
	max-height:80%;
	padding: 1rem;
	background-color:rgb(238,238,238);
	box-shadow: 0 0 10px 2px rgba(0,0,0,.8);
	z-index: 1;
	display:none;
}
#allergen label, #additive label {
	display: inline-block;
	width: 70%;
	padding: .4rem 0 0 .2rem;
	vertical-align: top;
	color:rgb(0,0,0);
	font-size:.7rem;
	font-weight:bold;
	text-align:left;
}
#additive .options { 
	display:block;
	max-height: 25rem; 
	overflow:hidden scroll;
}
.allergen { 
	display:inline-block;
	padding: 0;
	margin: 0 .3rem;
	cursor:help;
}
/* TBTC
.allergen::before { 
	content:'i';
	display: block;
	border:1px solid rgb(204,204,204);
	border-radius:.5rem;
	width:.7rem;
	height:.7rem;
	font-size:.5rem;
	line-height: 1.4em;
	text-align:center;
	color:rgb(204,204,204);
}
*/
.allergen > span {
	display: inline-block;
	width:.7rem;
	margin: 0 .1rem;
	text-align: center;
	font-size:.5rem;
	line-height: 1.4em;
	color:rgb(204,204,204);
}
.allergen > span:last-of-type {
	position: absolute;
	left:50%;
	top:3rem;
	width:100%;
	max-width:16rem;
	margin:0rem 0 0 -8rem;
	text-align: left;
	font-size:.7rem;
	background-color: var(--col_base);
	z-index: 1;
	overflow:hidden;
	max-height:0;
	padding: 0 .5rem;
	border:0px solid rgb(153,153,153);
	border-radius: 0 0 1rem 1rem;
	transition:all .5s ease-in;
}
.allergen:hover > span:last-of-type {
	border:1px solid rgb(153,153,153);
	max-height:20rem;
	padding: .5rem;
}
.allergen > span:last-of-type span:nth-of-type(odd) { 
	display:block; 
	width:1rem; 
	height:1rem;
	padding: 0 0 0 0;
	margin: .5rem 0 .2rem 0;
	font-size:.55rem;
	text-align:center;
	border:1px solid rgb(153,153,153);
	border-radius: 1rem;
}


/* # Info ################### */
.labelInfo { display:inline-block; width:1.6rem; height:1.6rem;  padding:0; font-size:1rem; font-weight:bold; text-align:center; border-radius:1rem; border: 2px solid var(--col_base); }
.blink { animation: blink 3s ease infinite; }
@keyframes blink {
	0% {border-color:var(--col_base); }
	50% {border-color:rgb(255,255,255); }
	100% {border-color:var(--col_base); }
}
.areaInfo { height:initial; max-height:0; overflow:hidden auto; padding: 0 1rem; border-width:0; transition:all .5s ease; }
.areaInfo legend { display:none; }
#chkInfo:checked + .areaInfo { max-height:20rem; border-width:1px; padding:1rem; }
#chkInfo:checked + .areaInfo legend { display:block; }


/* # Event ##################### */
.event hr { margin: .2rem 0; border:0; border-top:1px solid rgba(255,255,255,.3);}
/* .event hr + div { border-top: 0; } */
.eventEntry { border:1px solid rgba(255,255,255,.3); padding: 0 .5rem; font-size: .8rem; }
.eventEntry span { display:inline-block; vertical-align: top;}
.eventEntry > span:nth-of-type(1) { width:10rem; }
div.event .eventEntry > span:nth-of-type(2) { width: calc(100% - 10rem); }
.eventEntry > span:nth-of-type(1) span { width:5rem; }
/* .eventEntry span:nth-of-type(3) { float:right; } */
.eventEntry::after { content:''; display: block; clear:both; }
.eventEntry button { margin:0 .5rem 0 0; font-size: .65rem; background-color: transparent; border:0; color:rgb(255,255,255); box-shadow: none; }
.eventToday { 
	font-weight:bold;
	color: var(--col_base);
	background-color: rgba(255,255,255,.7);
}
.eventToday> div:nth-of-type(1) { 
	content:'Heute';
	color: rgb(255,255,255);
	display:inline-block;
	width: 3.5rem;
	margin: 0 0 0 -3.7rem;
}
.eventPast { 
	color: rgba(255,255,255,.3);
}


/* # Backend ##################### */
form .eventEntry > span:nth-of-type(1) { width:12rem; }
form .eventEntry > span:nth-of-type(1) span { width:5.5rem; }


/* # Menukarte ##################### */
.price { font-weight:700; padding:.25rem 0 .25rem 0; }
.price > span:last-of-type { display:block; float:right; }
#menucard { padding-bottom: 1rem; }
#menucard, #menucard p { position: relative; }
#menucard::before { 
	content:'';
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height:100%;
	background-image: url(/media/pexels-tanathip-rattanatum-1050216-2026454_1920x1080.jpg); 
	background-attachment: fixed;
	background-size: cover;
	background-position: 50%;
	opacity: .25;
}
.note_footer {
	font-size:.9rem;
	text-align:center;
	position: fixed;
	bottom: .2rem;
	width: 100%;
	color:rgb(200,200,200);
    line-height: 1.3;
}
.menugroup {
	display:table;
	width:100%;
	margin:0 0 .3rem 0;
}
.menugroup div {
	display:table-cell;
	vertical-align: bottom;
}
.menugroup div:last-of-type { text-align:right;	}
.menugroup p { line-height: 1.2; }


/* # Partner ##################### */
.partner { 
	position: relative;
	display: flex;
	flex-flow:row wrap;
}
.partner > div { 
	position: relative;
	display: table;
	flex: 1 1 10%;
	margin: .25rem 0;
}
.partner > div > div { 
	position: relative;
	display: table-cell;
	width: 100%;
	height: 6rem;
	padding: 10%;
	vertical-align: middle;
	text-align:center;
}
.partner > div a::before {
	content:'';
	position: absolute;
	left:1%;
	top:0;
	width:96%;
	height:100%;
	border-radius: .15rem;
	background-color: rgba(255,255,255,.3);
	z-index: 0;
}
.partner img {
	position: relative;
	z-index: 1;
	filter:drop-shadow(-1px -1px 1px rgba(255,255,255,.6)) drop-shadow(1px 1px 1px rgba(0,0,0,.8));
}

.copyright { font-size:.65rem; text-align:right; margin:-1rem 0 1rem 0; }
.copyright a { color:rgb(153,153,153); }
.copyright a:hover { color:var(--col_linkhover); }


/* # Map ##################### */
.map {
	position: relative;
	width: 100%;
	max-width: 1180px;
	height: inherit;
	margin-top: -10rem;
	text-align:center;
	perspective: 20000px;
	perspective-origin: center center;
	transform-style: preserve-3d;
}
.map > div:nth-of-type(1) {
	position: relative;
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	transition: all 1s ease;
	transform: rotateX(45deg) scale3d(1,1,1) translateZ(-1rem);
	z-index: 0;			
}

.map > div:nth-of-type(2) {
  position: absolute;
	left:2rem;
	top:11rem;
	max-width:12rem;
	padding: 1rem;
	border: 7px double var(--col_base);
	border-radius:1rem;
	color: var(--col_base);
	background-color: rgba(255,255,255,.5);
	box-shadow: 5px 40px 20px rgba(0,0,0,.25);
}

.map img:nth-of-type(1) { filter: drop-shadow(5px 20px 10px rgba(0,0,0,.5)); }

/* Dito GPS
	47.1750319 = 64,9450636182635 %
	8.9018621 = 31,8231741381112 %
*/
.map img:nth-of-type(2) {
	position: absolute;
	left: 65%;
	top: 32%;
	width:1.5rem;
	height:1.7rem;
	margin: -.5rem 0 0 0;
	opacity:.5;
	transform-origin: 50% 100%;
	transform: translateX(-.75rem) translateY(-1.7rem) rotateX(-45deg);
	transition: all .5s ease;
	filter: drop-shadow(0 20px 10px rgba(0,0,0,1));
}
.map:hover div img:nth-of-type(2) { 
	margin: -2.5rem 0 0 0;
	width:3rem;
	transform: translateX(-1.5rem) translateY(-3.8rem) rotateX(-45deg);
}

.map img:nth-of-type(3) {
	position: absolute;
	left: 65%;
	top: 32%;
	width:1rem;
	height:initial;
	opacity:0;
	transform-origin: 50% 100%;
	transform: translateX(-.5rem) translateY(0rem) rotateX(-45deg);
	transition: all .5s ease;
	filter: drop-shadow(0 20px 10px rgba(0,0,0,1));
}
.map:hover div img:nth-of-type(3) { 
	opacity: 1;
	width:3rem;
	transform: translateX(-1.5rem) translateY(-1.5rem) rotateX(-45deg);
}


/* # Logo Animation ##################### */
.logoanim {
	perspective: 500px;
	padding: 4rem 0;
}
.logoanim > div  {
	animation: rot 12s linear infinite;
}
.logoanim img {
	display: block;
	margin: auto;
	max-width: 90%;
	width: 300px;
	height:initial;
}
.logoanim img:nth-of-type(2) {
	opacity: .2;
	transform: rotateX(180deg);
}
@keyframes rot {
	0% { transform: rotateY(0deg); }
	50% { transform: rotateY(-90deg); }
	50.0001% { transform: rotateY(90deg); }
	100% { transform: rotateY(0deg); }
}


/* # Teaser ##################### */
.teaser {
	display: block;
	padding: 0 .75rem;
	max-width: 35rem;
	font-size:2rem;	
	text-align: center;
	color:var(--col_base);
	border:5px double var(--col_base);
	border-radius: 5rem;
	background-color: rgb(255,255,255);
	box-shadow: 5px 10px 10px rgba(0,0,0,.5);
	transform: translateY(1rem) rotateZ(-5deg);
	transform-origin: 50% 50%;
}
.teaser a, a.teaser { color:var(--col_base); }
.teaser a:hover, a.teaser:hover { color:rgb(0,0,0); }


/* # Order button ##################### */
.ordering { position: fixed; right:5rem; bottom: 2rem; z-index:10000; }
.ordering a {
	padding: .3rem.5rem;
	font-size:1.6rem;	
	font-weight: bold;
	text-align: center;
	color:var(--col_base);
	border:5px double var(--col_base);
	border-radius: 5rem;
	background-color: rgb(255,255,255);
	box-shadow: 5px 10px 10px rgba(0,0,0,.5);
	transform: translateY(1rem) rotateZ(-5deg);
	transform-origin: 50% 50%;
}
.ordering a:hover {
	color:rgb(255,255,255);
	border:5px double rgb(255,255,255);
	background-color: var(--col_base);
}



/* # CMS ##################### */
.cms { max-width: 59rem; width:100%; padding:0; }
.cms iframe { width: 59rem !important; }
.flex_50_50 iframe { width: 29rem !important; margin:0 auto 0 0; }
.cms > div:hover, .cms > div.flex_50_50 div:hover { background-color:  rgba(255,255,255,.05); }
.cms > div.flex_50_50:hover { background: none; }