html{
	/*height:100%;*/
	min-height:100%;
	box-sizing: border-box;
	
	
	
}
a, a:link, a:visited{display:block;}
a[href^=telephone]{ color:black; text-decoration:none;} 
 *, *:before, *:after { box-sizing: inherit;}
.ohnehand{cursor: default;}
input[type=text],input[type=checkbox], select, textarea{
  font-size:14px;
  border-radius: 0;}
#schutz{
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;
	z-index: 3000;
	background-color: rgba(0,0,0,0.3);
}
#schutz > div{
	position: absolute;
	height: auto;
	width: 100%;
	bottom: 0;
	z-index: 3020;
	padding-top: 15px;
	padding-bottom: 15px;
	font-family:'FiraSansCondensed', Arial, sans-serif;
	line-height: 130%;
	text-align: center;
	font-size: 17px;
}
#schutz a{
	font-family:'FiraSansCondensed', Arial, sans-serif;
	display: inline;
}
.dsask{
	display: block;
	width: 100%;
	padding-top: 14px;
	text-align: center;
}
.dsask div{
	display: block;
}
.dsask div:hover{
	cursor: pointer;
}
div.datenschutz{
	font-family:'FiraSansCondensed', Arial, sans-serif;
	text-align: center;
	font-size: 27px;
	margin-bottom: 0;
	padding-bottom: 0;
	hyphens: auto;
	-webkit-hyphens: auto;
}
#hamburger{
  display:none;
}
#facebook{
  width:20px;
  height:20px;
  background:url(../img/fb.png);
  float:right;
  margin-right:7px;
  margin-top:7px;
}   
.fb1{display:block;}
.fb2{display:none;margin:0 !important;} 
.left{float:left;}
.right{float:right;}
.clear{clear:both;height:0;}
strong{font-weight:bold;}


body {
  position: relative;
  margin: 0;
  height: 100%;
  min-height: 100%;
  padding-bottom: 120px;
  font-family:'FiraSansCondensed', Arial, sans-serif;
  font-size:100%; 
  /*background: linear-gradient(180deg, #9f1817 0%,  #cb5f0b 300px, #f7a500 100%);    */
}
main{
  min-height:200px;
  height:auto;
}
.wrapper{
  width:100%;
	max-width:1100px;
  height:100%;
	min-height:100%;
	margin: auto auto;
	padding-top:45px;
  font-weight:normal;
  padding-left:2%;
  padding-right:2%;
}
#header-site-title{
   text-transform:uppercase;
   font-size:5.5vw; /*5.5vw;  */
   margin-left:0.5%;
   letter-spacing:0.38rem;
   width:100%;   /*   77%;   */
   position:relative;
   z-index:100;
}
/*#header-site-title{
   font-size:5.5vw;
   letter-spacing:0.25rem;
   z-index:110;
   margin-bottom:-5px;
}   */
#logoframe{
  position:relative;
  float:right;
  margin-right:0px;
  width:22%;
  height:auto;
}
#logoframe a{color:white}
#logo{
  width: 100%;
  height:auto;
  background-size:contain;
  background-repeat:no-repeat;
  position:relative;
  margin-top:5px; /*25px; Jubi */
}
.kreis{/*
  width:76px;
  height:76px;
  position:absolute;
  z-index:200;
  left: -8%;  /* -230%; /*-15%; Jubi*/
/*  top:	25px; /*208px;	Jubi */
 /* -webkit-border-radius:38px;
  border-radius:38px;
  line-height:76px;
  vertical-align:middle;
  text-align:center;
  font-weight:bold;
  font-size:140%;
  /* box-shadow:20px 0 0 gold,0px 20px 0 gold,-20px 0 0 gold,0px -20px 0 gold;  */
 /* -webkit-box-shadow:0px 0px 0px 14px rgba(212,175,55,0.5);
  -moz-box-shadow:0px 0px 0px 14px rgba(212,175,55,0.5);
  box-shadow:0px 0px 0px 14px rgba(212,175,55,0.5);
  transform:rotate(-14deg);*/
  width: 65px;
  height: 65px;
  position: absolute;
  z-index: 200;
  left: -16%;
  top: 22px;
  /* -webkit-border-radius: 38px; */
  border-radius: 32px;
  line-height: 65px;
  /* vertical-align: middle; */
  text-align: center;
  font-weight: bold;
  font-size: 125%;
  box-shadow: 20px 0 0 gold,0px 20px 0 gold,-20px 0 0 gold,0px -20px 0 gold;
  -webkit-box-shadow: 0px 0px 0px 14px rgba(212,175,55,0.5);
  -moz-box-shadow: 0px 0px 0px 14px rgba(212,175,55,0.5);
  box-shadow: 0px 0px 0px 12px rgba(212,175,55,0.5);
  transform: rotate(-14deg);
}
#kreisdis{
   background-color:black;
}
#kronleuchter{
   position:absolute;
   left: 70px; /* Jubi */
   top: 6px;   
   width: 968px;
  /* min-width:560px;*/
  height:auto;
  background-size:contain;
  background-repeat:no-repeat;
  z-index:-50;
}
.container{
-webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  position: relative;
}
.col_L{
  margin-right:1.5%;
  width:87.5%;
  float:left;
  z-index:200;
  display:block;
}
.col_L .spaltenlayout{
   width:100%;
}
.col_L .spaltenlayout div{
   width:100%;
   -webkit-hyphens: auto;
   -webkit-hyphenate-limit-chars: auto 3;
   -webkit-hyphenate-limit-lines: 2;
   -ms-hyphens: auto;
   -ms-hyphenate-limit-chars: auto 3;
   -ms-hyphenate-limit-lines: 2;
   hyphens:auto;
   font-size: calc(12px + (12- 8) * ((100vw - 320px) / (1100 - 320)));
   line-height:130%; 
}
.col_L .spaltenlayout a{
  font-weight:bold;
  text-decoration:underline;
  text-decoration-skip:ink;
  text-underline-position:under;
  display:inline-block;
}
.col_L .spaltenlayout .content-gross-colored{
     font-size:150%;
}
.col_L .spaltenlayout .spalte_L, .col_L .spaltenlayout .spalte_R{
  width:50%;
  float:left;
  padding:1.5%;
  min-height:50px;
}
.col_L .spaltenlayout .spalte_L{padding-top:0.9%;}
.col_L .spaltenlayout .spalte_R{
  padding-left:0;
} 
.col_L .zweier{
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; 
  -ms-column-count: 2;
   column-count:2;
}
.col_R{
  width:11%;
  min-height:350px;
  float:left;
}  
.col_L .rand{
  padding:1.5%;
}
.col_L .fontcontent{
  line-height:130%;
}
.col_L .fontcontent a{
  display:inline;
  text-decoration:underline;
  text-underline-position:under;
  text-underline-position:below;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}
#L1, #L2, #R1, #R2{width:50%;}
#L1, #L2{float:left;}
#R1, #R2{float:right;}
#CLR2, #CLR3{padding-right:1.5%;}
#CLR3{padding-bottom:20px;}
.event{
  position:relative;
  width:100%;
  margin-bottom:15px;
  z-index:100;
  display:block;
}
.galerie{
  position:relative;
  width:100%;
  z-index:100;
  display:block;
}
#btn_back, #btn_for{
  position:absolute;
  width:50px;
 /* height:610px;  */
  bottom:50px;
}
#btn_back{left:0;
  background:url(../img/pfeil_links.png);
  background-repeat:no-repeat;
  background-position-y:center;
  background-position-x:center;
  }
#btn_for{
  right:0;
  background:url(../img/pfeil_rechts.png);
  background-repeat:no-repeat;
  background-position-y:center;
  background-position-x:center;
}
.event:last-child{
  margin-bottom:0px;
}
.eventelement{
  width:67.25%;
  float:left; 
  padding-left:12px;
  padding-top:16px;
  color:white;
}
.eventelement .button{ 
  text-decoration:none;
}
.eventelement .gross, .gross{
  font-size:160%;
  font-weight:bold;
  letter-spacing:0.06rem;
  margin-top:6px;
  margin-bottom:10px;
}
.eventelement .klein, .klein{
  font-size:150%;
  letter-spacing:0.04rem;
  font-weight:normal;
  min-height:24px;
}
.eventelement .kleiner, .kleiner{
	font-size: 90%;
	letter-spacing: 0.01rem;
}
.eventelement div:first-child{
  text-transform:uppercase;
}
.eventbild{
  float:left;
  width:32.75%;
}
.eventbild img, .galeriebild img{
  width:100%;
  height:100%;
  background-size:contain;
  display:block;
}
.galeriebild{
  float:left;
  width:100%;
}
.legende{
  height:50px;
  padding-top:10px;
  padding-left:10px;
  font-size:90%;
}
.legende div{
   padding-bottom:4px;
}
.eventlist{
   position:sticky;
   top:0;
}
.eventlistelement{
  font-size:120%;
  font-weight:600;
  letter-spacing:0.04rem;
  width:100%;
  padding:5px;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.elistborder{
  border-bottom:1px solid red;
}
.lastborder{border-bottom:0;}
.old{
  opacity:0.65;
}
.past{
  font-size:120%;
  font-weight:600;
  margin-top:5px;
  margin-bottom:0px;
  padding:5px;
}
.button{
  float:left;
  text-align:left;
  display:block;
  background-color:black;
  color:white;
  width:auto !important;
  font-weight:600;
  font-size:22px;
}
.eventelement .button{
  -webkit-box-shadow: 0px 0px 20px 3px rgba(255,255,255,0.5);
  -moz-box-shadow: 0px 0px 20px 3px rgba(255,255,255,0.5);
  box-shadow: 0px 0px 20px 3px rgba(255,255,255,0.5);
  padding:2px 6px 2px 6px;
  margin-top:1vw;           /*16px; */
  margin-right:30px;
}
.spalte_L div a.button{
   font-size:22px;
   padding:2px 6px 2px 6px;
   margin-top:1vw;
   margin-bottom:10px;
   -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
}
#footer-theme{
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  width:100%;
	max-width:1100px; 
  margin:auto auto; /* right: 0;left: 0; */
  padding-right:2%;
  padding-left:2%;
  /*height:50px;*/
}
#footer-theme > div{
 width:100%; height:70px;/* */
} 
.footer, .footer div, .footer a{
  float:left;
}

.footer{
  width:50%; font-size:80%;padding-top:7px;padding-right:2px;float:left;
  }  
.footer a, .footer a:link, .footer a:visited{
  margin-right:5px;
  text-decoration:underline;
  text-underline-position:under;
  text-underline-position:below;
  color:black;
}
.footer div:first-child{
    margin-left:2%;
    margin-right:3px;;
} 
#reservationform{
	position: relative;
}
ul.clock{
	width: 50px;
	height: 50px;
	background-color: transparent;
	border-radius: 100%;
	position: absolute;
	list-style: none;
	border: 3px solid white;
	left: 150px;
	bottom: 10px;
}
ul.clock::before{
	position: absolute;
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background-color: white;
	left: calc(50% - 3px);
	top: calc(50% - 3px);
	z-index: 5;
}
ul.clock li:first-child{
	position: absolute;
	height: 3px;
	width: 40%;
	right: 50%;
	top: calc(50% - 2px);
	border-radius: 40px;
	transform-origin: right center;
	background-color: white;
	animation: ani 1s infinite linear;
}
ul.clock li:last-child{
	position: absolute;
	height: 3px;
	width: 25%;
	right: 50%;
	top: calc(50% - 2px);
	border-radius: 40px;
	transform-origin: right center;
	background-color: white;
	animation: ani 15s infinite linear;
}
@keyframes ani{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
.copyright{
  font-size:80%;
  margin-top:1px;
   margin-left:0.8%;
   
}
/*
@media screen and (min-width: 1500px) {
#kronleuchter{
	left: 28%; 
}  
}  
*/
/*
@media screen and (max-width: 1800px) {
	#kronleuchter{
		left: 24%;  /* neu Jubi*/
	/*}
}
@media screen and (max-width: 1400px) {
	#kronleuchter{
		left: 16%;  /* neu Jubi*/
/*	}
}
*/
@media screen and (min-width: 1100px) {
#header-site-title{
   font-size:60px;
}                
}   

@media screen and (max-width: 1050px) {
.footer{font-size:68%;}
.eventelement a.button{margin-top:0px;} 
.eventelement{padding-top:8px;}
.eventelement .gross, .gross{font-size:140%;}
.eventelement .klein, .klein{font-size:130%;}
.eventelement .kleiner, .kleiner{font-size: 80%;}
#kronleuchter{
	left:30px;
}
}

@media screen and (max-width: 960px) {
.footer{
  width:100%;
} 
.fb1{display:none;}
.fb2{display:block;}  
.kreis{
	/* left:-11%;  Jubi */
	display: none;
} 
#kronleuchter{
	left: -4% /* -20px;*/
}
}
@media screen and (max-width: 920px) {
.copyright{margin-left:2%;}
.impressum{
  margin-top:5px;
  margin-bottom:5px;
  width:100%;
}
.eventelement .gross, .gross{
  font-size:128%;
}
.eventelement .klein, .klein{
  font-size:110%;
}
.eventelement .kleiner, .kleiner{
	font-size: 85%;
}
#kronleuchter{
	/*left: 0; /* Jubi */
}
} 
@media screen and (max-width:830px){
.wrapper{
  padding-top:14px;
}
#toptitle{
 margin-left:1.1%;
} 
#header-site-title{
font-size:6vw;
width:100%;
}            
#logoframe{
  position:absolute;
  float:right;
  top:160px;          
  right:2%;
  width:140px;
}
#kronleuchter{
	top:10px; /* 60px; Jubi */
}
#logo{
	margin-top:0; /* Jubi */
}
.kreis{
  left:45%;
  top:-96px;
}               
.col_L{
  width:77.5%;
  margin-right:2.5%;
}
.col_R{
  width:20%;
  position:relative;
  z-index:5;  
} 
.eventbild{
  width:38.8%;
} 
.eventelement{
  width:61.2%;
}
.eventelement .gross, .gross{
  font-size:140%;
}
.eventelement .klein, .klein{
  font-size:120%;
  /*max-height:18px;*/
  /*overflow:hidden;*/
  line-height:120%;
}
.eventelement .kleiner, .kleiner{
	font-size:80%;
	max-height:22px;	
}
.eventlistelement{
   font-size:136%;
   padding:6%;
}
.formchk div input[type='checkbox']{padding-right:10px;}
/*.formchk div:nth-child(2){width:90%;padding-left:8px;} */
#btn_field{
position:absolute;
left:63%;
bottom:8%;
 /* display:none;  */
}
#btn_field .button{
  font-size:18px;
}
.eventelement .button{
  margin-right:8px; 
}
#galerie .col_R{display:none;}
#galerie .col_L{width:100%;}
#galerie .col_L a{display:block;}
#R1, #R2{float:none;width:100%;}
#L1, #L2{width:100%;}
.col_LR{padding:1.5%}
#CLR1{padding:0;}
#LL2, #CLR2{padding-bottom:0;}
#CLR2, #CLR3{padding-top:0;}
.col_L .zweier{
  -webkit-column-count: auto; /* Chrome, Safari, Opera */
  -moz-column-count: auto; 
  -ms-column-count: auto;
   column-count:auto;
}
}
@media screen and (max-width:810px){
#logoframe{
  top:190px;          
}
#kronleuchter{
	content:url("../img/jub/jubi_kronleuchter_mobile.png");
	width: 100%;
}
}
@media screen and (max-width:760px){ 
 
.kreis{
  left:30%;
  top:-80px;
}

.eventelement .gross, .gross{
  font-size:110%;
  margin-bottom:0px;
}
.eventelement .klein, .klein{
  font-size:100%;
  max-height:50px;
  overflow:hidden;
  line-height:none;
}
.eventelement .kleiner, .kleiner{
	font-size: 80%;
}
#header-site-title{font-size:7vw;}
}
@media screen and (max-width:660px){ 
#header-site-title{font-size:6vw;}
  #logoframe{top:35px;
  }
  #kronleuchter{/*display: none; /*min-width:200px;width:450px; Jubi*/}
  #btn_field .button{
  font-size:15px;
}
.eventelement .gross, .gross{
  font-size:100%;
  margin-bottom:0px;
}
.eventelement .klein, .klein{
  font-size:80%;
}
}
@media screen and (max-width:599px){ 
     .col_R{display:none;}
     .col_L{width:100%;}
     .eventelement .gross, .gross{
  font-size:115%;
  margin-bottom:0px;
}

.eventelement .klein, .klein{
  font-size:100%;
}
.eventelement .kleiner, .kleiner{
	font-size: 90%;
}
 #btn_field .button{
  font-size:18px;
}     
    
} 
@media screen and (max-width:530px){
 #btn_field .button{
  font-size:16px;
}   

}
@media screen and (max-width:520px){
#logoframe a{
  display:none;
}
#logoframe{
  top:18px;
  width:30%;
  right:4.2%
}
#btn_field .button{
font-size:14px;
}
#hamburger{display:inline-block;}
.eventelement .gross, .gross{
  font-size:105%;
  margin-bottom:0px;
  margin-top:0;
}
.eventelement .klein, .klein{
  font-size:95%;
}
.eventelement .kleiner, .kleiner{
	font-size: 85%;
}
#logo{
/*	width: 60%;*/
	margin-top: -25px;
}

}
@media screen and (max-width:450px){
#logoframe{
  top:50px;
  width:25%;
  right:4.2%
}
#header-site-title{font-size:6vw;}
#btn_field .button{
font-size:13px;
}
.footer{
	font-size: 58%;
}
} 
@media screen and (max-width:440px){
#header-site-title{font-size:5vw;}
 #btn_field .button{
font-size:12px;
}
}
@media screen and (max-width:415px){
.eventelement .gross, .gross{
  font-size:90%;
  margin-bottom:4px;
}
.eventelement .klein, .klein{
  font-size:80%;
}
 #btn_field .button{
font-size:10px;
}
}