@charset "UTF-8";

/* AUFKLAPPBOXEN */
.teaser {
	padding: 0;
	margin-left: 16.7%;
		 
	overflow: hidden; 							/*damit es scrollt, wenn geöffnet*/
	background-image:url(../bilder%20Mathias/bg_content.png);
	position: relative; 						/*damit .schließen-Button unten rechts stehen kann*/
	margin-bottom: 1em;							/*Abstand unter den Boxen*/
	/*border:1px solid green;*/
	}					
	

.teaser div.getrennt{padding:0;}
.teaser .mehr {display: inline;}
.teaser .rest {display: none;}
.teaser.open .mehr {display: none;}
.teaser.open .rest {display: inline;}
body { 	min-width: 990px; 
		overflow: auto; 
		margin:0;
		background-color:#666666;

	}
.untenrechts { position: absolute; 
				bottom: 1em; right: 1em; 
				color:black;
				}		
.untenrechts a {text-decoration:underline;
				}
.untenrechts a:hover {color:#666666;}



/*BILD*/
#bild { max-width: 1600px;
		width:100%; 
		margin:0;
		padding:0;}

#bild div {		padding-top: 66.36%; 
				background-image:url(../bilder%20Mathias/mathias-kusche-slider_2_0796.jpg);
			    background-repeat: no-repeat; 
				background-attachment:scroll; /*eventuell raus*/
			   	background-size: cover; 
			    background-position: center;
				border:none;
				}
				
#head {	position: absolute;
		left: 0; top: 0; z-index: 5000;
		min-width: 990px; width: 100%;		
	}

/*LOGO*/
#logobox {	
		width:33%; min-width:30px; max-width:447px;
	}
	
#logobox a { 
		display:block;

		width: 100%;
		height: 0;
		padding-top: 13.87%;
			
		background-image: url(../bilder%20Mathias/bg_logobox_schwarz_Logo.png);
		background-size: cover;
								
		text-indent: -1000em; 
		overflow: hidden;
	}
			
/*MENÜLEISTE*/
#navibox div {	
		width:33%; min-width:30px; max-width:447px;	
		float: left;
	  }
	  
#navibox div a {
			display:block;

			width: 100%;
			height: 0;
			padding-top: 8.72%;
			
			background-image: url(../bilder%20Mathias/bg_logobox_schwarz_schauspieler.png);
			background-size: cover;
								
			text-indent: -1000em; 
			overflow: hidden;
}	  
		
/*MENÜPUNKTE*/
ul#menu {	background-image:url(../bilder%20Mathias/bg_menu_weiss.png);		/*weiße Menüleiste*/
			
			list-style-type:none;
			height: 65px;
			font-family:Arial, Helvetica, sans-serif;
			font-size:18px;
			font-style:normal;
					
			text-align:right; 
			
			padding-right: 10%; 
			
			margin-left: 15%; 
			margin-top:0;
			margin-right:0;
			margin-bottom:0;
		}

ul#menu li{	
			display:inline-block;
			margin-right: 3%; 		/*Abstände zwischen den Punkten nach rechts*/
			/*border: 1px solid yellow;	*/ /*TEST*/
		}

ul#menu li.kontakt{ 
			margin-right: 0%;		/*Abstand nach rechts*/	
		}

/*STYLE FÜR LINKS*/
ul#menu a {
			display: block; 
			text-decoration:none;
			color:black;
			height: 60px; line-height: 70px; /*Änderung des Zeilenhöhe und wo die Streifen sitzen */
		}

/*STYLE FÜR ROLLOVER*/
ul#menu a:hover {
			color:#666666;
			border-bottom: 5px solid #666666; 	
		}


/*CONTENTBOX*/
#contentbox{ position: absolute;
		     left: 0; top: 10em; z-index: 5000;
		     min-width: 891px; width: 90%;	
			 height: 32em;
			 
			 line-height:2em;
				
			 font-family:Arial, Helvetica, sans-serif;
			 font-size:16px;
			 font-style:normal;
				
			 text-align:left; 

			 overflow:auto;
		  }

#contentbox div	{ padding: 1em 3em 1em 3em;
				}

/*BOXEN mit Inhalt*/

h1				{margin:0;		/*damit die zugeklappten Boxen schmaler werden und so hoch sind wie die Überschrift*/
				padding:0;
				color:black;}
				
h1 a			{ color: black;		
				text-decoration:none;}
								
h1 a:hover		{ color: #666666;
				text-decoration:underline;}


/*AUFKLAPPBOX 1*/
/*Engagement*/
dl#engagement dt,dd {float:left;}

dl#engagement dt {	width: 5em;
				clear:left;
				font-weight:bold;
				padding-top: .5em;
				}
				
dl#engagement dd.engagementort {width: 30em;
				clear:right;
				padding-top:0.5em;
				}	
				
/*Theaterrollen*/
#rollenüber	{float:left;
			padding-top:1em;
			clear:left;
}
			
dl#rollen dt,dd {float:left;}

dl#rollen dt {	width: 10em;
				clear:left;
				float:left;
				font-weight:bold;
				margin-bottom: .5em;
				}

dl#rollen dd.name {width: 15em;
				clear:right;
				float:left;
				margin-bottom:0.5em;
				}	
							
dl#rollen dd.regie {width: 10em;
				clear:right;
				float:left;
				margin-bottom:0.5em;
				}

/*Musical*/
#musicalüber	{float:left;
				padding-top:1em;
				clear:left;
				}
			
dl#musical dt,dd {float:left;}

dl#musical dt {	width: 10em;
				clear:left;
				float:left;
				font-weight:bold;
				margin-bottom: .5em;
				}

dl#musical dd.name {width: 15em;
				clear:right;
				float:left;
				margin-bottom:0.5em;
				}	
							
dl#musical dd.regie {width: 10em;
					clear:right;
					float:left;
					margin-bottom:0.5em;
					}
					
/*Klassenzimmerstück*/
ul#klassenzimmer{list-style:none;
				padding:0;}
p.buchbar{font-weight:bold;}
				
/*Museumskonzept*/
p.museum	{font-weight: bold;
			margin-top: 2em;
			font-size:20px;}

p.buchbar{font-weight:bold;}
			
p.beispiele	{font-weight:bold;}

#schwarzmarkt img {float: right;
					clear:left;
					}

/*Presse*/
p.pressetitel {font-weight:bold;}
p.presseinhalt {font-style:italic;
				margin-top:0;
				margin-bottom:0;}
p.pressequelle {margin-top:0;}

/*Aktuelles*/
#aktuellbox {	max-width:10em;
				width: 10em;
				min-width: 30px;
				height:2em;
				line-height:2em;
				
				position:fixed;
				z-index: 3000; 
			
				margin:0; 
				padding:0;
				bottom:0px;			/*damit es unten und rechts anliegt*/
				left:0px;
				
				background-image:url(../bilder%20Mathias/bg_impressum_box.png);
	
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
				font-style:normal;
				
				text-align:center; 
		}
		
#aktuellbox a{color:white;
				text-decoration:none;
				}
				
#aktuellbox a:hover{color:#666666;
					background-image:url(../bilder%20Mathias/bg_impressum_box_hell.png);
				}

/*IMPRESSUMBOX*/
#impressumbox {	max-width:10em;
				width: 10em;
				min-width: 30px;
				height:2em;
				line-height:2em;
				
				position:fixed;
				z-index: 3000; 
			
				margin:0; 
				padding:0;
				bottom:0px;			/*damit es unten und rechts anliegt*/
				right:0px;
				
				background-image:url(../bilder%20Mathias/bg_impressum_box.png);
	
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
				font-style:normal;
				
				text-align:center; 
		}
		
#impressumbox a{color:white;
				text-decoration:none;
				}
				
#impressumbox a:hover{color:#666666;
					background-image:url(../bilder%20Mathias/bg_impressum_box_hell.png);
					}
				
@media only screen and (min-width: 992px) {
  #body { width: 100%;}
}

@media only screen and (max-width: 838px) {
  #body {
    width: 100%;
  }
  #sequence .model {
    max-width: 100% !important;
    width: auto;
  }
}

@media only screen and (max-width: 768px) {
  #body {
    width: 100%;
  }
 #sequence .title {
    font-size: 2.8em;
  }
  #sequence .subtitle {
    font-size: 1.6em;
  }
  #sequence .sequence-next,
  #sequence .sequence-prev {
    height: 60px;
    margin-top: -40px;
  }
  #sequence .model {
    max-width: 100% !important;
    width: auto;
  }
}

@media only screen and (max-width: 568px) {
  #body {
    left: 0;
    min-width: 40%;
    /*prevents the model from shrinking when the browser is resized*/
    width: 100%;
  }


  /*#sequence .title {
    background: #FFFFFF;
    background: rgba(0, 0, 0, 0.3);
    bottom: 0;
    left: 100%;
    padding: 4%;
    bottom: -50%;
    width: 100%;
    z-index: 10;
  }
  #sequence .subtitle {
    visibility: hidden;
  }*/
 
}

@media only screen and (max-width: 518px) {
  #body {
    width: 100%;
  }
}

@media only screen and (max-width: 468px) {
  #body {
    height: 100%;
  }
  /*#sequence .sequence-pagination {
    opacity: 0;
    visibility: hidden;
  }*/
}

@media only screen and (max-width: 418px) {
  #body {
    height: 375px;
  }
}

@media only screen and (max-width: 368px) {
  #body {
    height: 100%;
  }
  #sequence .title {
    font-size: 2.2em;
  }
}

@media only screen and (max-width: 320px) and (orientation: portrait) {
  /*iphone portrait*/
  #body {
    height: 100%;
  }
  #sequence .model {
    min-height: 45%;
    width: 45%;
  }
 
}

@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
  #body {
    width: 100%;
  }
  #sequence .model {
    min-width:100%;
    width: 100%;
  }
  #sequence .sequence-pagination {
    right: 17.5%;
  }
}