/*Zentrales Stylesheet für die regieseite, muss im websiteordner liegen*/
#alles {margin-top: 3em; width: 960px; margin-left: auto; margin-right: auto;}
.stück {margin-bottom: 2em;}
.vorbereitung {font-size: 80%; color: #4DD0E1; font-style: italic; padding-right: 20px;}
.spalte-links-spielzeit {display: table-cell; font-weight: bolder; font-size: 90%; 
padding-bottom: 20px;}
.spalte-links  { display: table-cell; width: 400px; vertical-align: top;}    
.spalte-mitte  {display: table-cell; width: 560px;}     
.spalte-rechts {display: table-cell; vertical-align: top; font-size: 90%; text-align: left}
.stücktitel       {font-size: 90%; font-weight: bolder;}  
.Autor{font-size: 70%; margin-top: 0%;}
.Ort {font-size: 80%; font-weight: bolder;}
.Zeit{font-size: 70%;} 
.zeitungskritik {font-size: 80%;}
.Zeitungsname {font-size: 70%; font-style: normal; margin-top: 3px; margin-bottom: 1em;}
.aufführungsart {font-size: 70%; font-weight: bolder;}
.linkfarbe {color: #71abb3;}

/*wechselbilder erstellen: 
bilderx5s=Länge der Animation=100%, 
jetzt die Übergänge für die 1.s (einblenden 1/Länge=x/100), 5.sec (voll da 5/Länge=x/100) und 6.sec (abblenden 6/Länge=x/100) festlegen für die @keyframes, vorn und hinten immer 0 und 100%, 
bei den nth-of-type immer eins weniger als gesamte Anzahl der Bilder, die einzelnen Bilder werden dann versetzt angesteuert durch animation-delay, @keyframes und animation müssen gleiche Namen haben bei animation die Länge eintragen  */

/*12 wechselbilder für loriot, Lulu, Fatima */
.wb12 {position: relative;}
.wb12 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s;}    
.wb12 figure {animation: zwoelf 60s infinite linear 0s; opacity: 0; } 
@keyframes zwoelf 
{ 0% {opacity: 0;} 2% {opacity: 1;} 8% {opacity: 1;} 10% {opacity: 0;} 100% {opacity: 0;}}
.wb12 figure:nth-of-type(11) {animation-delay: 5s; }
.wb12 figure:nth-of-type(10) {animation-delay: 10s; }
.wb12 figure:nth-of-type(09) {animation-delay: 15s; }
.wb12 figure:nth-of-type(08) {animation-delay: 20s; }
.wb12 figure:nth-of-type(07) {animation-delay: 25s; }
.wb12 figure:nth-of-type(06) {animation-delay: 30s; }
.wb12 figure:nth-of-type(05) {animation-delay: 35s; }
.wb12 figure:nth-of-type(04) {animation-delay: 40s; }
.wb12 figure:nth-of-type(03) {animation-delay: 45s; }
.wb12 figure:nth-of-type(02) {animation-delay: 50s; }
.wb12 figure:nth-of-type(01) {animation-delay: 55s; }

/*10 wechselbilder für: Anton */
.wb10 {position: relative;}
.wb10 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s;}
.wb10 figure {animation: zehn 50s infinite linear 0s; opacity: 0; }
@keyframes zehn 
{0% {opacity: 0;} 2% {opacity: 1;} 10% {opacity: 1;} 12% {opacity: 0;} 100% {opacity: 0;}}
.wb10 figure:nth-of-type(09) {animation-delay: 5s; }
.wb10 figure:nth-of-type(08) {animation-delay: 10s; }
.wb10 figure:nth-of-type(07) {animation-delay: 15s; }
.wb10 figure:nth-of-type(06) {animation-delay: 20s; }
.wb10 figure:nth-of-type(05) {animation-delay: 25s; }
.wb10 figure:nth-of-type(04) {animation-delay: 30s; }
.wb10 figure:nth-of-type(03) {animation-delay: 35s; }
.wb10 figure:nth-of-type(02) {animation-delay: 40s; }
.wb10 figure:nth-of-type(01) {animation-delay: 45s; }

/*8 wechselbilder: PuF*/
.wb08 {position: relative;}
.wb08 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s;}
.wb08 figure {animation: acht 40s infinite linear 0s; opacity: 0; }
@keyframes acht 
{0% {opacity: 0;} 3% {opacity: 1;} 13% {opacity: 1;} 15% {opacity: 0;} 100% {opacity: 0;}}
.wb08 figure:nth-of-type(07) {animation-delay: 5s; }
.wb08 figure:nth-of-type(06) {animation-delay: 10s; }
.wb08 figure:nth-of-type(05) {animation-delay: 15s; }
.wb08 figure:nth-of-type(04) {animation-delay: 20s; }
.wb08 figure:nth-of-type(03) {animation-delay: 25s; }
.wb08 figure:nth-of-type(02) {animation-delay: 30s; }
.wb08 figure:nth-of-type(01) {animation-delay: 35s; }


/*9 wechselbilder für endland, revanche, Krabat, Limit*/
.wb09 {position: relative;}
.wb09 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s;}
.wb09 figure {animation: neun 45s infinite linear 0s; opacity: 0; } 
@keyframes neun 
{0% {opacity: 0;} 2% {opacity: 1;} 11% {opacity: 1;} 13% {opacity: 0;} 100% {opacity: 0;}}
.wb09 figure:nth-of-type(08) {animation-delay: 5s; }
.wb09 figure:nth-of-type(07) {animation-delay: 10s; }
.wb09 figure:nth-of-type(06) {animation-delay: 15s; }
.wb09 figure:nth-of-type(05) {animation-delay: 20s; }
.wb09 figure:nth-of-type(04) {animation-delay: 25s; }
.wb09 figure:nth-of-type(03) {animation-delay: 30s; }
.wb09 figure:nth-of-type(02) {animation-delay: 35s; }
.wb09 figure:nth-of-type(01) {animation-delay: 40s; }

/*7 wechselbilder für: Loriot HH, MPoppins,  */
.wb07 {position: relative;}
.wb07 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s; }
.wb07 figure {animation: sieben 35s infinite linear 0s; opacity: 0; }
@keyframes sieben {
0% {opacity: 0;} 3% {opacity: 1;} 14% {opacity: 1;} 17% {opacity: 0;} 100% {opacity: 0;}}
.wb07 figure:nth-of-type(06) {animation-delay: 5s;}
.wb07 figure:nth-of-type(05) {animation-delay: 10s;}
.wb07 figure:nth-of-type(04) {animation-delay: 15s;}
.wb07 figure:nth-of-type(03) {animation-delay: 20s;}
.wb07 figure:nth-of-type(02) {animation-delay: 25s;}
.wb07 figure:nth-of-type(01) {animation-delay: 30s;}

/*6 wechselbilder für: erste Stunde, Loriot Lahnstein, Banks01 */
.wb06 {position: relative;}
.wb06 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s; }
.wb06 figure {animation: sechs 30s infinite linear 0s; opacity: 0; }
@keyframes sechs 
{0% {opacity: 0;} 3% {opacity: 1;} 17% {opacity: 1;} 20% {opacity: 0;}100% {opacity: 0;}}
.wb06 figure:nth-of-type(05) {animation-delay: 5s; }
.wb06 figure:nth-of-type(04) {animation-delay: 10s; }
.wb06 figure:nth-of-type(03) {animation-delay: 15s; }
.wb06 figure:nth-of-type(02) {animation-delay: 20s; }
.wb06 figure:nth-of-type(01) {animation-delay: 25s; }

 /* 5 wechselbilder für: DkM, Krieg, WoB */ 
.wb05 {position: relative;}
.wb05 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s;}
.wb05 figure {animation: fuenf 25s infinite linear 0s; opacity: 0;}
@keyframes fuenf 
{ 0% {opacity: 0;} 4% {opacity: 1;} 20% {opacity: 1;} 24% {opacity: 0;} 100% {opacity: 0;}}
.wb05 figure:nth-of-type(04) {animation-delay: 5s; }
.wb05 figure:nth-of-type(03) {animation-delay: 10s; }
.wb05 figure:nth-of-type(02) {animation-delay: 15s; }
.wb05 figure:nth-of-type(01) {animation-delay: 20s; }

/*4 wechselbilder für: Katze, Zimmerschlacht, Lola HH, Lotte, Figaro, Bartsch */
.wb04 {position: relative;}
.wb04 figure {position: absolute; top: -15px; left: -40px; z-index: 1; animation-delay: 0s; }
.wb04 figure {animation: vier 20s infinite linear 0s; opacity: 0; }
@keyframes vier 
{0% {opacity: 0;} 5% {opacity: 1;} 25% {opacity: 1;} 30% {opacity: 0;} 100% {opacity: 0;}}
.wb04 figure:nth-of-type(03) {animation-delay: 5s;}
.wb04 figure:nth-of-type(02) {animation-delay: 10s;}
.wb04 figure:nth-of-type(01) {animation-delay: 15s;}