/* body
---------------------------------------------------------------------------------------------- */
body.index { 
	margin: 0;
    font-size: 0.8em; 				/* 0.9 */
	font-family: Helvetica, Futura, sans-serif;
	background-color: #000000;
}

body.inhalt { 
	margin: 0;
    font-size: 0.8em; 				/* 0.9 */
	font-family: Helvetica, Futura, sans-serif;
	background-color: #FFFFFF;
}

/* div
---------------------------------------------------------------------------------------------- */
div.inhalt {
	position: absolute;
	background-color: none;
	border-style: none;
	border-width: 3px;
	border-color: red;
	top: 55px;
	left:0px;
	right:0px;	
    font-size: 0.9em; 			/* 0.9 */
}	

div.kleinebilder {				/* ----Vorschaubilder---- */
	text-align: center;	
	border-style: none;
	border-width: 3px;
	border-color: black;
	margin-top: 20px;
}

div.text {						/* ----Text in den einzelnen Stücken---- */
	text-align: center;	
	border-style: none;
	border-width: 3px;
	border-color: black;
	margin-top: 15px;
}

div.bild {						/* ----großes Bild bei den einzelnen Stücken---- */
	text-align: center;	
	border-style: none;
	border-width: 3px;
	border-color: black;
	margin-top: 10px;
}

  .content1, .content2 {		/* ----großes Bild / Film bei den einzelnen Stücken---- */
	text-align: center;	
	border-style: none;
	border-width: 3px;
	border-color: black;
	margin-top: 10px;
 }
 
 .content2 {					/* ----Film bei den einzelnen Stücken unsichtbar---- */
    display: none;
 }

div.photo {						/* ----Fotograf---- */
	text-align: center;	
	border-style: none;
	border-width: 3px;
	border-color: black;
	margin-top: 4px;
    font-size: 0.7em; 
	color: #C0C0C0;
}

.grid {							/* ----Grid für Arbeiten und Terminen---- */
	display: grid;
  	grid-template-columns: 25% 25% 25% 25%; 
    grid-row-gap: 5px; 
  	grid-column-gap: 5px;
  	width: 99vw;
	padding: 0px;
	margin: 20px 0px 0px 0px;
	border-style: none;
	border-width: 1px;
	border-color: black;	}

@media only screen and (max-width: 1600px) {
	.grid {
  		grid-template-columns: 33.3% 33.3% 33.3%;
	}
}
@media only screen and (max-width: 1050px) {
	.grid {
  		grid-template-columns: 50% 50%;
	}
}
@media only screen and (max-width: 900px) {
	.grid {
		grid-template-columns: auto;
	}
}

div.stueck {					/* ----Stückblock für Arbeiten, Termine---- */
   	padding: 30px;
 	text-align: center;
/* ----box-shadow: 4px 5px 4px 0 rgba(240, 240, 240, 0.8);---- */
	border-style: none;
	border-width: 1px 1px 1px 1px;
	border-color: black;	
	}

div.arbeit {					/* ----Stück für Arbeiten, Termine---- */
	margin-top:10px; 
	margin-bottom:10px; 
	text-align: center;
	border-style: none;
	border-width: 1px 1px 1px 1px;
	border-color: black;
}

div.termine	{					/* ----Termine Daten---- */
	text-align: center;
	margin-top:30px; 
	margin-bottom:13px; 
	border-style: none;
	border-width: 1px 1px 1px 1px;
	border-color: black;
}

div.kontakt {					/* ----Kontakt---- */
	margin-top:43px; 
   	padding: 20px;
	text-align: center;
	margin-bottom:10px; 
	border-style: none;
	border-width: 1px 1px 1px 1px;
	border-color: black;
}

div.impressum	{				/* ----weitere Infos Kontakt---- */
	margin-top:110px; 
   	padding: 20px;
	text-align: center;
	margin-bottom:10px; 
	border-style: none;
	border-width: 1px 1px 1px 1px;
	border-color: black;
}

div.fehler {					/* ----Text auf Fehlerseite---- */
    font-size: 1.8em; 
	padding:20px;
	text-align: center;	
	margin-top: 100px;
}

/* img
---------------------------------------------------------------------------------------------- */
img.bild {						/* ----großes Bild bei den einzelnen Stücken---- */
	border-style: solid;
	border-width: 2px;
	border-color: black;
	max-width: 90%;
	max-height: 600px;
}

img.bilder {						/* ---- Bilder bei Arbeiten Bilder---- */
	border-style: solid;
	border-width: 2px;
	border-color: black;
	max-width: 96%;
	max-height: 400px;
}

img.bilderleer {						/* ----fehlende Bilder bei Terminen---- */
	border-style: solid;
	border-width: 2px;
	border-color: #FFFFFF;
	max-width: 96%;
	max-height: 400px;
	box-shadow: 2px 2px 8px rgba(200,200,200,0.8);
}

.responsive-video {
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 25px; 
    height: 0;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    width: 80%;
    height: 80%;
	max-height: 600px;
}

/*
.responsive-video iframe {    		(100%)
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
*/

img.vorschau {					/* ----Vorschaubilder bei den einzelnen Stücken---- */
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

/* h
----------------------------------------------- */
h1 { font-size:1.4em; font-weight:bold; margin: 0px 0 -6px 0;}

h1.ohneh2 { font-size:1.4em; font-weight:bold; margin: 0px 0 3px 0;}

h1.contact { font-size:1.4em; font-weight:bold; margin: 0px 0 3px 0;}

h2 { font-size:0.8em; color:#000000; font-weight:normal; margin-bottom:7px; font-style:normal;}

h3 { font-size:1.0em; color:#000000; font-weight:bold; margin-bottom:3px; font-style:normal;}

/* p
---------------------------------------------------------------------------------------------- */
p { font-size:0.8em; font-weight:normal}

/* span
---------------------------------------------------------------------------------------------- */
span.terminealt { text-decoration: line-through; color:#C0C0C0;}	/* ----alte Termine---- */

/* menue
---------------------------------------------------------------------------------------------- */
.header {
  height:55px;
  background-color: #F4F4F4;
  box-shadow: 1px 1px 11px 0 rgba(169, 169, 169, 0.8);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  font-size: 1.5em;  	/* 1.3 */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #F4F4F4;
}

.header li a {
  display: block;
  padding: 20px 20px;
  text-align: center;	
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #F4F4F4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 1.3em;		/* 1.5 */
  padding: 16px 15px;
  text-decoration: none;
  color:#000000;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 25px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #000000;
  display: block;
  height: 3px;
  position: relative;
  transition: background .2s ease-out;
  width: 24px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 8px;
}

.header .menu-icon .navicon:after {
  top: -8px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 300px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 51em) {		/* 48 */
  .header li {
    float: left;
  }
  .header li a {
    padding: 10px 20px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

/* menueindex
---------------------------------------------------------------------------------------------- */
.headerindex {
  height:55px;
  background-color: #000000;
  box-shadow: 1px 1px 11px 0 rgba(169, 169, 169, 0.8);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.headerindex ul {
  font-size: 1.5em;  	/* 1.3 */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #000000;
}

.headerindex li a {
  display: block;
  padding: 20px 20px;
  text-align: center;	
  text-decoration: none;
}

.headerindex li a:hover,
.headerindex .menu-btn:hover {
  background-color: #000000;
}

.headerindex .logo {
  display: block;
  float: left;
  font-size: 1.3em;		/* 1.5 */
  padding: 16px 15px;
  text-decoration: none;
  color:#808080;
}

/* menu */

.headerindex .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.headerindex .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 25px 20px;
  position: relative;
  user-select: none;
}

.headerindex .menu-icon .navicon {
  background: #808080;
  display: block;
  height: 3px;
  position: relative;
  transition: background .2s ease-out;
  width: 24px;
}

.headerindex .menu-icon .navicon:before,
.headerindex .menu-icon .navicon:after {
  background: #808080;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.headerindex .menu-icon .navicon:before {
  top: 8px;
}

.headerindex .menu-icon .navicon:after {
  top: -8px;
}

/* menu btn */

.headerindex .menu-btn {
  display: none;
}

.headerindex .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.headerindex .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.headerindex .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.headerindex .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.headerindex .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.headerindex .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 51em) {		/* 48 */
  .headerindex li {
    float: left;
  }
  .headerindex li a {
    padding: 10px 20px;
  }
  .headerindex .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .headerindex .menu-icon {
    display: none;
  }
}

/* a
---------------------------------------------------------------------------------------------- */
a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none; color:#000000; }
a:hover { text-decoration:underline; color:#000000; }
a:active { text-decoration:none; color:#000000; }
a:focus { outline: none;}

a.stuecke:link { text-decoration:none; color:#000000; }
a.stuecke:visited { text-decoration:none; color:#000000; }
a.stuecke:hover { text-decoration:underline; text-decoration-thickness: 2px; color:#000000; }
a.stuecke:active { text-decoration:none; color:#000000; }
a.stuecke:focus { outline: none;}

a.termine:link { text-decoration:none; color:#000000; }
a.termine:visited { text-decoration:none; color:#000000; }
a.termine:hover { text-decoration:underline; text-decoration-thickness: 2px; color:#000000; }
a.termine:active { text-decoration:none; color:#000000; }
a.termine:focus { outline: none;}

a.kontakt:link { text-decoration:none; color:#000000; }
a.kontakt:visited { text-decoration:none; color:#000000; }
a.kontakt:hover { text-decoration:underline; text-decoration-thickness: 2px; color:#000000; }
a.kontakt:active { text-decoration:none; color:#000000; }
a.kontakt:focus { outline: none;}

a.name:link { text-decoration:none; color:#000000; }
a.name:visited { text-decoration:none; color:#000000; }
a.name:hover { text-decoration:underline; text-decoration-thickness: 2px; color:#000000; }
a.name:active { text-decoration:none; color:#000000; }
a.name:focus { outline: none;}

a.index:link { text-decoration:none; color:#808080; }
a.index:visited { text-decoration:none; color:#808080; }
a.index:hover { text-decoration:underline; double; text-decoration-thickness: 2px; color:#C0C0C0; }
a.index:active { text-decoration:none; color:#000000; }
a.index:focus { outline: none;}

a.menue:link { text-decoration:none; color:#000000; }
a.menue:visited { text-decoration:none; color:#000000; }
a.menue:hover { text-decoration:underline; text-decoration-thickness: 2px; color:#000000; }
a.menue:active { text-decoration:none; color:#000000; }
a.menue:focus { outline: none;}

/* Dekorationen
---------------------------------------------------------------------------------------------- */
u { 
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-style: double;
}

/* Slideshow
---------------------------------------------------------------------------------------------- */
	.slideshow
				{margin: 0;padding: 0;}
					
	#slideshow_wrapper_inpage
		{background:#000000;position:relative;width:100%;height:1200px;max-height:100vh;border: 0px solid #30a3bf;box-sizing: border-box;margin-top: 0px;}
	.slideshow
		{list-style:none;width:100%;height:100%;top:0;right:0;bottom:0;left:0;overflow:hidden;position: absolute;}
	.slideshow li
		{margin-top: 0px; margin-right: 10%; margin-left: 10%; width:80%;position:absolute;top:0;right:0;bottom:0;left:0;color:transparent;background-size: contain;background-repeat: no-repeat;background-position:50% 20%;opacity:0;animation: slideShowA 60s linear infinite 0s;}

			@keyframes slideShowA { 
		0% {
			opacity: 0;
			transform: scale(1) rotate(0deg);
		}
		2% {
			opacity: 1;
		}
		10% {
			opacity: 1;
		}
		12% {
			opacity: 0;
			transform: scale(1.04) rotate(0deg);
		}
	}
	.slideshow li:nth-child(1) {background-image:  url(./Buehnenbilder/Der_Geizige_Escher.jpg);animation-delay:  0s;}
	.slideshow li:nth-child(2) {background-image:  url(./Buehnenbilder/Die_Odyssee-Opernhaus_Zuerich.jpg);animation-delay:  5s;}
	.slideshow li:nth-child(3) {background-image:  url(./Buehnenbilder/OberstChabertTheaterBonn.jpg);animation-delay: 10s;}
	.slideshow li:nth-child(4) {background-image:  url(./Buehnenbilder/FlyingDutchman-Set_Design.jpg);animation-delay: 15s;}
	.slideshow li:nth-child(5) {background-image:  url(./Buehnenbilder/Sommernachtstraum-Opernhaus_Zuerich.jpg);animation-delay: 20s;}
	.slideshow li:nth-child(6) {background-image:  url(./Buehnenbilder/Der_Sandmann.jpg);animation-delay: 25s;}
	.slideshow li:nth-child(7) {background-image:  url(./Buehnenbilder/Der_Geizige.jpg);animation-delay: 30s;}
	.slideshow li:nth-child(8) {background-image:  url(./Buehnenbilder/Die_Odyssee_SetDesign-Opernhaus_Zuerich.jpg);animation-delay: 35s;}
	.slideshow li:nth-child(9) {background-image:  url(./Buehnenbilder/DasSchlossKafkaBand.jpg);animation-delay: 40s;}
	.slideshow li:nth-child(10) {background-image: url(./Buehnenbilder/Was_das_Nashorn_sah.jpg);animation-delay: 45s;}
	.slideshow li:nth-child(11) {background-image: url(./Buehnenbilder/Elektra_Cesare_Lievi.jpg);animation-delay: 50s;}
	.slideshow li:nth-child(12) {background-image: url(./Buehnenbilder/Obers_Chabert_Theater_Bonn.jpg);animation-delay: 55s;}