* {
  margin: 0;
  padding: 0; 
  border: 0;
}

body {
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

#background {    
  background: url(../images/vorhang.jpg) no-repeat center top fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-weight: bold;
  font-size: 120%;
  line-height: 120%;  
  margin:0;
}

h2 {
  font-weight: bold;
  font-size: 100%;
  line-height: 120%;  
  margin:0;
  text-decoration:underline;
}

.spacer {
  clear:both;
  padding:0;
  margin:0;
}

.visitable {
  border: 1px solid white;
  border-collapse: collapse;
}

.visitable td {
  border: 1px solid white;
  border-collapse: collapse;
  padding:2px;
}

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
  text-decoration: none;
  font-weight: normal;
  pointer-events: none; 
  cursor: text;
}

.spielplanbild {
  width:250px;
  height:auto;
  margin-bottom:12px;
}

.wechsler {
  width:100%;
}

/*###################################*/
/*###### Datenschutzerklaerung ######*/
/*###################################*/

.datenschutz p { 
  padding-bottom: 1em;
}

.datenschutz strong { 
  font-weight: 600;
}

.datenschutz h2 { 
  padding-top: 1em;
  padding-bottom: 0.5em;  
}

.datenschutz li { 
  padding-left: 0.5em;
  margin-left: 1em;  
  padding-bottom: 0.2em;  
}

.datenschutz ul { 
  padding-top: 0.5em;
  padding-bottom: 0.5em;  
}

/*###############################*/
/*###### Produktionsseiten ######*/
/*###############################*/


.produktstionstrenner {
  height:1px;
  border:0 auto;
  background:white;
  width:100%;  
  margin-top:0.5em;
  margin-bottom:0.5em;
}

#reservierlink {
  margin-left: auto;
  margin-right: auto;
}

.produktionsbild {
  width:200px;
  max-width:40%;
  height:auto;
  margin-bottom:0.5em;
}

#produktionsbild-1 {
  width:200px;
  max-width:40%;
  height:auto;
  margin-left:0.5em;   
  margin-bottom:0.5em;  
  float:right;
}

#produktionsbild-2 {
  width:200px;
  max-width:40%;
  height:auto;
  margin-right:0.5em;  
  margin-top:0.5em;  
  margin-bottom:0.5em;  
  float:left; 
}

#produktionsbild-3 {
  width:200px;
  max-width:40%;
  height:auto;
  margin-left:0.5em;  
  margin-top:0.5em;  
  margin-bottom:0.5em;  
  float:right;
}

.produktionsbild-u {
  width:32%;  
  height:auto;  
  margin-top:0.5em;
  vertical-align:top;
}
 
#bilderbox-unten {  
  text-align:center;
  margin-bottom:0.5em;
  max-height:310px;
  height:10%;
  overflow:hidden;
}

/*#################################*/
/*######## Formulardinge ##########*/
/*#################################*/

.reservierungsformular label { 
  display: inline-block; 
  width: 12em; 
  vertical-align: top;  
}

.formularzeile {
  margin-bottom: 8px;
}

.reservierungsformular {
  background: rgba(255, 255, 255, 0.1);
  padding:10px;
  border:1px solid white;
}

.reservierungsformular button {
  padding:4px;
  width:15em;
}

.reservierungsformular input {
  padding:4px;
}

.reservierungsformular input[type=text] {
  width:18em;
  font-family: inherit;
  font-size: 80%;
}

.reservierungsformular input[type=submit] {
  width:15em;
}

.reservierungsformular input[type=reset] {
  width:8em;
}

textarea {
  resize: none;
  overflow: auto;
  font-family: inherit;
  font-size: 80%;
}

.reservierungsformular option {
  text-align:right;
  padding:2px;  
}

.verwaltungsformular label { 
  display: inline-block; 
  width: 12em; 
  vertical-align: top;  
}

.verwaltungsformular input {
  padding:4px;
  font-family: inherit;
  font-size: 80%;
}

.verwaltungsformular input[type=submit] {  
  padding:5px;
  margin:2px;
}


/*##########################*/
/*######## Header ##########*/
/*##########################*/

#image-header {  
  overflow:hidden;
  margin-top:20px;
  /*height:250px;*/
}

#image-header span {
  width: 32%;
  float:left;
  height:250px;
  
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center; 
}

#zuschauerraum {
  background: url(../images/zuschauerraum.jpg);
}

#buehne {
  background: url(../images/buehne.jpg);
  margin-left:2%;
  margin-right:2%;
}

#bistro {
  background: url(../images/bistro.jpg);
}

/*########################*/
/*######## Logo ##########*/
/*########################*/

#logoschriftzug-container {
  max-width:610px;
  margin:0 auto;        
}

#logoschriftzug {
  width:100%;  
}

/*###########################*/
/*######## Content ##########*/
/*###########################*/

/* content container */
.content-container {    
  max-width: 750px;
  /*min-height: 500px;*/
  _height: 500px; /*IE 9 Fix*/  
  background: rgba(30, 30, 30, 0.6);
  padding:15px;
  color:#E0E0E0;  
  margin: 12px auto 1em;
}

.content-container #neuebreite {
  width:200px;
}

.extrawide-container {
  /*max-width: 750px;*/
  /*min-height: 500px;*/
  _height: 500px; /*IE 9 Fix*/  
  background: rgba(30, 30, 30, 0.6);
  padding:15px;
  color:#E0E0E0;  
  margin: 12px auto 1em;  
  width:95vw;
}

/*#######################*/
/*### Sonderloesungen ###*/
/*#######################*/

.start-page-container {
  /*display:block;*/
  max-width: 780px;  
  margin-top: 12px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:1em;      
  position: relative;
}

#start-content-container {
  display:inline-block;
  max-width: 458px; 
  _height: 500px; /*IE 9 Fix*/  
  background: rgba(30, 30, 30, 0.6);
  padding:15px;
  color:#E0E0E0;    
  z-index:1;
  
  width:458px;
}

#start-event-container {
  position: absolute;
  top:0;
  display:inline-block;
  width: 250px;  
  background: rgba(30, 30, 30, 0.6);
  padding:15px;
  color:#E0E0E0;  
  margin-bottom:auto;  
  margin-left: 12px;
  z-index:1;  
}

#start-event-container p {
  margin-bottom:12px;
}

#infolink {
  font-size:80%;
}

/*##################################*/
/*######## Image Lightbox ##########*/
/*##################################*/


input[type="checkbox"].zoom {
 display: None;
}

input[type="checkbox"].zoom ~ img {
 margin-top: 4px;
 border: Solid 1px #FFF;
 cursor: zoom-in;
 transition: transform 0.7s;
 max-width: 30%;
 height: Auto; 
}

input[type="checkbox"].zoom:checked ~ img {
  transform: scale(3.0, 3.0);
  cursor: zoom-out;
}

label.zoom { 
  display: inline;     
  text-decoration:none;
  font-weight: bold;
  color: #FFF;
}

.reservierungsformular label.zoom { 
  margin-left: 12.3em;
}

label.zoom:hover {
    text-decoration: underline;
}

/*#########################*/
/*######## Links ##########*/
/*#########################*/

/* regular link */
a:link {
  text-decoration:none;
  font-weight: bold;
  color: #FFF;
}

/* visited link */
a:visited {
  color: #FFF;    
}

/* mouse over link */
a:hover {
  text-decoration: underline;
}

/* selected link */
a:active {
  color: #FFF;
}

/*#########################*/
/*######## Menue ##########*/
/*#########################*/
/* navigation */
.navigation {	
  display:block;
  width:780px;
  margin-left:auto;
  margin-right:auto;
  
}

/*Strip the ul of padding and list styling*/
.navigation ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

/*Create a horizontal list with spacing*/
.navigation li {
	display:inline-block;
	float: left;
	/*margin-right: 1px;*/
}

/*Style for menu links*/
.navigation li a {
	display:block;
	min-width:40px;
	padding-left:10px;
	padding-right:10px;
	height: 50px;
	text-align: center;
	font-size: 13px;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #FFF;	
	background: rgba(30, 30, 30, 0.6);
	text-decoration: none;
	font-weight: normal;	
	transition: all 0.2s ease-in-out;	
	width:91.4px;
}

.navigation #homesymbol {
	/*font-size:16px;*/
	display:inline;	
    color:#FFF;	
}

.navigation #hometext {
	display:none;
}

.navigation li a#current{
	background: rgba(80, 80, 80, 0.8);
}

/*Hover state for top level links*/
.navigation li:hover a {	
	background: rgba(80, 80, 80, 0.9);
	color: #FFF;
	transition: all 0.2s ease-in-out;	
}

/*###############################*/
/*Style for dropdown links*/

.navigation li:hover ul {
	position:absolute;
	top:inherit;
	z-index:99;
	/*margin-top: 1px;*/
}

.navigation li:hover ul a {
	
	color: #FFF;	
	background: rgba(30, 30, 30, 0.8);
	height: 40px;	
	line-height: 40px;
	width: 130px;
	z-index:98;
}

/*Hover state for dropdown links*/
.navigation li:hover ul a:hover {
    background: rgba(80, 80, 80, 0.9);
	color: #fff;
}

/*Hide dropdown links until they are needed*/
.navigation li ul {
	display: none;
}

/*Make dropdown links vertical*/
.navigation li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
.navigation li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
.navigation ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*#############################################################*/
/*### Style 'show menu' label button and hide it by default ###*/
/*#############################################################*/

.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #FFF;	
	background: rgba(30, 30, 30, 0.6);
	text-align: center;
	padding: 10px 0;
	display: none;	
	margin-bottom: 1px;
	width:100%;
	max-width:780px;
	margin-left:auto;
	margin-right:auto;
	cursor: pointer;
}

/*Hide checkbox*/
.navigation input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
.navigation input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*###########################*/
/*###########################*/
/*#### Responsive Styles ####*/
/*###########################*/
/*###########################*/


@media screen and (max-width : 885px){
    a[href^="tel"]:link,
    a[href^="tel"]:visited, 
    a[href^="tel"]:hover {
      font-weight: bold;
      pointer-events: auto; 
      cursor: pointer;
    }

    a[href^="tel"]:hover {
      text-decoration: underline;
    }
	
    .start-page-container {  
      width: 780px;
	  max-width:100%;	  
	}

	#start-content-container {	    
	  max-width: 100%;	
	  width:inherit;
	  padding:15px;
	  box-sizing: border-box;
	}
			
	#start-event-container {
	  display:none;
	}	
	
	/* navigation */
    .navigation {
      max-width:780px;
	  width:100%;
    }

	/*Make dropdown links appear inline*/
	.navigation ul {
		position: static;
		display: none;		
	}
	
	/*Create vertical spacing*/
	.navigation li {
		/*margin-bottom: 1px;*/
		z-index:90;
	}
	
	.navigation li a {
	  padding-left:0px;
	  padding-right:0px;
	  width:100%;
	  max-width:780px;
	  margin-left:auto;
	  margin-right:auto;
	}
	
    .navigation li:hover ul {	
	  position:relative;	  
    }
	
    .navigation li:hover ul a {	
	  width: auto;
      z-index:5;  
	}
	
	/*Make all menu links full width*/
	
	.navigation ul li, li a {
		width: 100%;
		z-index:1;
	}
	
	.navigation li ul {
		max-width:780px;
	    margin-left:auto;
	    margin-right:auto;
	}
	
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
	
    .navigation #homesymbol {
	  display:none;
    }

    .navigation #hometext {
	  display:inline;
    }	
}