/* CSS-File zu AndreasUndPetra... *****************************************************************/


* {
	font-family: sans-serif;
	color: white;
	}
.Ueberschrift {
	font-size: 300%;
	}
.Erklaerung {
	font-size: 200%;
	}
	
body, figure, img, figcaption, p {
	margin: 0;
	padding: 0;
	overflow: hidden;  /* Verhindert alle Scrollbalken */
	}	
body {
	position: relative;  /* Bezugssystem fuer absolute Positionierung der Kindelemente */
	height: 100vh;
	width:  100vw;
	background-image: linear-gradient(15deg, darkgrey, black);
	}


/* Pfeile zum vor- und zurueckklicken: ************************************************************/


.Pfeil {
	position: absolute;
	height: 5%;
	z-index: 10;  /* Immer ganz vorne */
	}
.PfeilRechts {
	right: 1%;
	top: 2%;
	}
.PfeilLinks {
	left: 1%;
	top: 2%;
	}
.PfeilRechts:hover {
	cursor: pointer;
	}
.PfeilLinks:hover {
	cursor: pointer;
	}	
	
	
/* Zentrale Stilelemente: *************************************************************************/	


figure {
	height: 100vh;                                               /* Nimmt sich den ganzen body  */
	width:  100vw; 
	position: absolute;                                       /* Alle figures im selben Fenster */
   top: 0;
	left: 0;       
	background-size: cover;                                      /* Kuerzere Seite einschmiegen */
	background-position: center 0vh;        /* Masse nicht nach center. Sonst: vh geht, % nicht */
	background-repeat: no-repeat;
	visibility: hidden;                                             /* Fuer den Startbildschirm */	
	}
figure.NachStart {
	visibility: visible;
}	
	
.Bildmarke, figcaption, p {
	position: absolute;	
	}

.Fliesstext {
	opacity: 0.5;
	visibility: hidden;
	}

figure, .Bildmarke, .Ueberschrift, .Erklaerung {  /* transition wird nicht vererbt */
	transition-duration: 1000ms;
	}



/* Fuer die einzelnen Bildseiten: *****************************************************************/


.AndreasUndPetra {  /* url-Adresse bezieht sich auf CSS-Adresse */
	background-image: url(".././Elemente/AndreasUndPetra/AndreasUndPetraFarbverlauf.png"); 
	}
.AndreasUndPetra.VorNach {
	background-position: center top 100vh;
	visibility: hidden;
	}
	
.AndreasUndPetraKopfPetra {
	top:     10%;
	height:  70%;
	right:   55%;
	}
.AndreasUndPetraKopfPetra.VorNach {
	/* Wenn mann im normalen Element z.B. left vergibt und im VorNach dann right,
	   dann wiedersprechen sich die Aussagen,
	   weil das left ja nicht getilgt, sondern nur ergänzt wurde. */
	top:    -50%;	
	height: 200%;
	right: -100%;
	}
		
.AndreasUndPetraKopfAndreas {
	top:     10%;	
	height:  70%;
	left:    50%;
	}
.AndreasUndPetraKopfAndreas.VorNach {
	top:    -50%;
	height: 200%;
	left:  -200%;
	}	
	
.AndreasUndPetraPetra {
	right:   70%;
	bottom:  10%;	
	}	
.AndreasUndPetraPetra.VorNach {
	bottom: 110%;
	}	

.AndreasUndPetraUnd {
	left:    45%;	
	bottom:  11%;
	}
.AndreasUndPetraUnd.VorNach {
	bottom: 200%;
	}	
	
.AndreasUndPetraAndreas {
	left:    65%;	
	bottom:  10%;
	}
.AndreasUndPetraAndreas.VorNach {
 	bottom: 110%;
 	}	

	
.Events {
	background-image: url(".././Elemente/Events/EventsFarbverlauf.png");
	}
.Events.VorNach {	
	background-position: center top 100vh;
	visibility: hidden;
	}

.EventsKameraLinks {
	height:  75%;
	top:     15%;
	left:     0%;
	}
.EventsKameraLinks.VorNach {
	left: 110%;
	}		

.EventsKameraRechts {
   height:  75%;
	top:     15%;
	right:    0%;
	}
.EventsKameraRechts.VorNach {
	right:   110%;
	}	

.EventsEvents {
	top:     30%;
	left:    35%;
	}
.EventsEvents.VorNach {
	top:    -50%;
	}

.EventsRueckschau {
	top:     50%;
	left:    35%;
	}		
.EventsRueckschau.VorNach {
	top:    -50%;
	}


.PickSort {
	background-image: url(".././Elemente/PickSort/PickSortFarbverlauf.png");
	}
.PickSort.VorNach {
	background-position: center top 100vh;
	visibility: hidden;
	}
	
.PickSortDiaRot1 {
	transform: rotate(-15deg);
	height:  45%;
	top:     15%;
	left:    20%;
	}
.PickSortDiaRot1.VorNach {
	height: 5%;
	left:   110%;
	}		

.PickSortDiaRot2 {
	transform: rotate(15deg);
	height:  45%;
	top:     40%;
	left:     5%;
	}
.PickSortDiaRot2.VorNach {
	height: 5%;
	left:   110%;
	}

.PickSortDiaBlau {
	height:  45%;
	top:     40%;
	left:    20%;
	}
.PickSortDiaBlau.VorNach {
	height: 5%;
	left:   110%;
	}
			
.PickSortDiaSchwarz {
	height:  45%;
	top:     15%;
	left:     5%;	
	}
.PickSortDiaSchwarz.VorNach {
	height: 5%;
	left:   110%;
	}
			
.PickSortPickSort {
	top:     60%;
	left:    60%;
	}
.PickSortPickSort.VorNach {
	top:    -50%;
	}
	
.PickSortSortiert {	
	top:     80%;
	left:    60%;
	}
.PickSortSortiert.VorNach {
	top:    -50%;
	}
	
.PickSortText {
	width:   30%;
	top:     15%;
	left:    60%;
	}
.PickSortTextSichtbar{
	visibility: visible;
	}


.Padi {
	background-image: url(".././Elemente/Padi/PadiFarbverlauf.png");
	}
.Padi.VorNach {
	background-position: center top 100vh;
	visibility: hidden;
	}

.PadiTaucher {
	height:  75%;
	bottom:  10%;
	left:    10%;	
	}
.PadiTaucher.VorNach {
	bottom: 110%;
	}
	
.PadiPadi {
	top:     60%;
	left:    40%;
	}
.PadiPadi.VorNach {
	top:    -50%;
	}

.PadiPlanner {
	top:     80%;
	left:    40%;	
	}
.PadiPlanner.VorNach {
	top:     -50%
	}

.PadiText {
	width:   50%;
	top:     20%;
	left:    40%;
	}
.PadiTextSichtbar{
	visibility: visible;
	}	
	
	
.Wlan {
	background-image: url(".././Elemente/Wlan/WlanFarbverlauf.png");
	}
.Wlan.VorNach {
	background-position: center top 100vh;
	visibility: hidden;
	}

.WlanAntenne {
	height:  70%;
/* left:     3%;  Wg. schwierigem Zentrieren auf der Seite als (Inline-Style+JavaScript) gebaut. */
	bottom:   0%;
	}
.WlanAntenne.VorNach {
	bottom: 110%;
	}

.WlanWlan {
	bottom:  80%;
	left:    15%;	
	}
.WlanWlan.VorNach {
	left:     0%;
	bottom: 110%;
	}

.WlanRichtantenne {
	bottom:  81%;
	left:    35%;	
	}
.WlanRichtantenne.VorNach {
	left:    50%;
	bottom: 110%;
	}
	
.WlanText {
	width:   70%;
	top:     70%;
	left:    15%;
	}
.WlanTextSichtbar {	
	visibility: visible;
	}	


.Jeton {
	background-image: url(".././Elemente/Jeton/JetonFarbverlauf.png");
	}
.Jeton.VorNach {
	background-position: center top 100vh;
	visibility: hidden;
	}

.JetonSegelboot {
	height:  70%;
	bottom:  20%;
	right:   10%;		
	}
.JetonSegelboot.VorNach {
	bottom: -50%;
	right:  110%;	
	}

.JetonSchwert {
	top:     20%;
	left:    10%;
	}
.JetonSchwert.VorNach {
	top:   -100%;
	}

.JetonJeton {
	top:     40%;
	left:    10%;
	}
.JetonJeton.VorNach {
	top:    -50%;
	}

.JetonText {
	width:   80%;
	bottom:  10%;
	left:    10%;
	}
.JetonTextSichtbar  {
	visibility: visible;
	}	


.Sisyphos {
	background-image: url(".././Elemente/Sisyphos/SisyphosFarbverlauf.png");
	}
.Sisyphos.VorNach {
	background-position: center top 100vh;
	visibility: hidden;
	}

.SisyphosFigur {
	height:  70%;
	bottom:  15%;
	right:   10%;
	}
.SisyphosFigur.VorNach {
	bottom:-200%;
	right:  200%;
	}
	
.SisyphosRenovierung	{
	top:     15%;
	left:     5%;	
	}
.SisyphosRenovierung.VorNach	{
	top:    -50%;
	}
	
.SisyphosSisyphos {
	top:     30%;
	left:     5%;
	}
.SisyphosSisyphos.VorNach {
	top:    -50%;
	}