/* Schriftdateien laden */
@font-face {
	font-family: "Yantranamav" ;
	src: url(Schriften/Yantramanav/Yantramanav-Light.ttf); 
}
@font-face{ 
	font-family: bangers;
	src:url(Schriften/Bangers-Regular.ttf);
}
@font-face{
	font-family:Courier;
	src: url(Schriften/CourierStd.otf)
}
body {
	position: relative;
	background-image: url(Raumhintergrund1440.png); 
	background-repeat: no-repeat;
	background-size: cover; /* Das Hintergrund soll den ganzen Bildschirm füllen */ 
	width: 1440px;
	height: 900px;
	max-width:1440px; 
}

.Rätsel { /* CSS-Klasse, die alle Rätsel-Boxen definiert. */ 
	position: absolute; 
	left: 150px;
	bottom:100px;
	padding: 20px;
	border-radius: 30px 30px 30px 30px;
	max-width: 1440px;
	background-color:#F7F3E3; /*Hintergrund-Farbe der Box */ 
	box-shadow: 5px 5px 10px 0px gray; /* Schatten der Box */ 
	visibility: hidden; /* die Rätsel-Boxen sind zunächst nicht sichtbar */ 
	z-index: 10; /*die Rätsel-Boxen sind immer im Vordergrund */ 
	text-align: center; /* Der Text ist zentriert */ 
	font-size: 30px; /*Schriftgröße*/ 
	font-family: Yantranamav; /*Schriftart*/ 
}
.CLOSE{ /* CSS-Klasse, die alle Close-Buttons definiert */ 
	position: absolute; 
	top: 0px; /* Die Buttons befinden sich immer in der rechten oberen Ecke der Boxen*/ 
	right: 0px;
	padding: 10px;
	width: 30px;
	cursor: pointer; /* Auf dem Button verändert sich der cursor zum Finger*/ 
}

#logo { /* ID die das Logo definiert. Das Logo befindet sich immer in der linken oberen Ecke des Bildschirms.*/ 
	display: block;
	position: fixed; 
	width: 300px;
	top: 30px;
	left : 30px;
}

#tür { /* ID, die Aussehen und Position der Tür definiert. */ 
	width: 220px; /*Größe*/ 
	position: absolute;
	bottom: 230px; 
	left: 840px; 
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#Lichtschalter{ /* ID, die Aussehen und Position des Lichtschalters definiert. */ 
	position: absolute;
	width: 30px;
	left: 1100px;
	bottom: 400px;
	z-index:10; 
}
#Glühbirne { /* ID, die Aussehen und Position der dunklen Glühbirne definiert. */
	position: absolute;
	bottom: 650px;
	left: 700px;
	width: 40px;
	visibility: visible;
}
#Glühbirneleuchtet { /* ID, die Aussehen und Position der leuchtenden Glühbirne definiert. */
	position: absolute;
	bottom: 465px;
	left: 510px;
	width: 420px;
	visibility: hidden; /* die leuchtende Glühbirne ist zunächst nicht sichtbar */ 
}
#overlay {
  position: fixed; 
  display: block; 
  width: 100%; /* Das Overlay liegt über dem kompletten Bildschirm */ 
  height: 100%; 
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Schwarzer Hintergrund mit Transparenz */
  z-index: 9; /* Das Overlay liegt über allen anderen Elementen, aber noch unter dem obersten Overlay "#overlay2" */

}
#overlay2{ /* ID, die Aussehen und Position des obersten Overlays definiert. */
	position:fixed;
	display: block;
	width: 100%; /* Das Overlay liegt über dem kompletten Bildschirm */ 
	height:100%;
	z-index: 10;/* Das Overlay liegt über allen anderen Elementen */
}

#Türoffen { /* ID, die Aussehen und Position der geöffneten Tür  definiert. */
	position: absolute;
	width: 430px;
	bottom: 180px; 
	left: 790px; 
	visibility: hidden; /* die geöffnete Tür ist zunächst nicht sichtbar. */ 
	z-index: 10;
}

#teppich { /* ID, die Aussehen und Position des Teppichs definiert. */
	position: absolute; 
	width: 450px;
	bottom: 20px; 
	left: 500px; 
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}

#Bild1 { /* ID, die Aussehen und Position des rechten Wandbildes definiert. */
	position: absolute; 
	width: 125px;
	bottom: 410px; 
	left: 1340px; 
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}

#Bild2 { /* ID, die Aussehen und Position des linken Wandbildes definiert. */
	position: absolute; 
	bottom: 450px; 
	left: 1240px;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#Geschafft { /* ID, die Aussehen und Position des der Box definier, die sich nach gelöstem Fehlerbild-Rätsel öffnet. */
	position: absolute;
	left: 200px;
	bottom:300px;
	padding: 30px;
	border-radius: 30px 30px 30px 30px;
	max-width: none;
	background-color:#F7F3E3;
	box-shadow: 5px 5px 10px 0px gray;
	visibility: hidden;
	z-index: 10;
	text-align: center; 
	font-size: 30px;
	font-family: Yantranamav;
}

#SafeZu { /* ID, die Aussehen und Position des geschlossenen Safes definiert. */
	position: absolute; 
	width: 120px;
	bottom: 450px; 
	left: 650px;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#SafeAuf { /* ID, die Aussehen und Position des geöffneten Safes definiert. */
	position: absolute;
	width:200px;
	bottom: 450px;
	left:650px;
	visibility: hidden; /* der geöffnete Safe ist zunächst nicht sichtbar */ 
}
#BriefSafe { /* ID, die Aussehen und Position des kleinen Briefs im Safe definiert. */
	position: absolute;
	width: 50px;
	left:685px;
	bottom: 470px;
	visibility: hidden; /* der Brief ist zunächst nicht sichtbar */ 
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#Ölgemälde{ /* ID, die Aussehen und Position des Ölgemäldes definiert. */
	position: absolute;
	bottom:430px;
	left: 600px;
	width: 220px;
	rotate: 0deg;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}

#Kuehlschrank { /* ID, die Aussehen und Position des Kühlschranks definiert. */
	position: absolute; 
	width: 180px;
	bottom: 200px; 
	left: 360px;
}
#Backofen { /* ID, die Aussehen und Position des Backofens definiert. */
	position: absolute; 
	width: 200px; 
	bottom: 200px; 
	left: 500px;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#BackofenOffen{ /* ID, die Aussehen und Position des geöffneten Backofens definiert. */
	position: absolute; 
	width: 266px; 
	bottom: 182px; 
	left: 450px;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
	visibility: hidden; /*zunächst nicht sichtbar*/ 
}
#Ofengriff { /* ID, die Aussehen und Position des Backofengriffs definiert. */
	position: absolute;
	left: 35px; 
	bottom: 430px;
	cursor:grabbing; /* Cursor verändert sich zu einer greifenden Hand*/ 
}
#Brief{ /* ID, die Aussehen und Position des Briefs definiert. */
	position: absolute;
	left: 560px;
	bottom: 265px;
	width: 60px;
	visibility: hidden;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}

.Brief { /* CSS-Klasse, die Aussehen und Position aller geöffneten Briefe definiert. */
	visibility: hidden;
	position: absolute; 
	left: 450px;
	bottom: 300px;
	z-index: 10;
}
/* IDs, die Aussehen und Position der Knöpfe definiert. */
#Knopf1 { 
	position: absolute;
	width: 65px;
	left: 70px;
	top: 40px;
	rotate: 0deg;
}
#Knopf2 {
	position: absolute;
	width: 65px;
	left: 200px;
	top: 40px;
	rotate: 0deg;
}
#Knopf3 {
	position: absolute;
	width: 65px;
	left: 330px;
	top: 40px;
	rotate: 0deg;
}
#Knopf4{
	position: absolute;
	width: 65px;
	left: 460px;
	top: 40px;
	rotate: 0deg;
}

#Bauklotzturm { /* ID, die Aussehen und Position des Bauklotzturms definiert. */
	position: absolute; 
	width: 150px;
	bottom: 40px; 
	left: 280px; 
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#Zettel{ /* ID, die Aussehen und Position des Zettels definiert. */
	position: absolute; 
	width: 50px;
	left: 550px; 
	bottom: 50px; 
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#FredFroh { /* ID, die Aussehen und Position des fröhlichen Freds und Fritz definiert. */
	position: absolute; 
	width:850px;
	bottom: -30px; 
	left: 100px;
	visibility: hidden;
	z-index: 10;
}
#Fenster{ /* ID, die Aussehen und Position des Fensters definiert. */
	position: absolute;
	left:70px;
	bottom: 310px;
	width:200px;
}

#Spinnennetz { /* ID, die Aussehen und Position des Spinnennetzes definiert. */
	position: absolute;
	bottom:650px; 
	left: 1080px;
	width:150px;
	rotate: 40deg;
	cursor: url("Objekte/Element 6.png"), auto; /* Der Cursor verändert sich zur Lupe*/ 
}
#Gewonnenfenster { /* ID, die Aussehen und Position des Fensters definiert, welches sich bei gewonnenem Spiel öffnet. */
	position: absolute;
	padding: 10px;
	bottom: 450px;
	left: 400px;
	border-radius: 30px 30px 30px 0;
	max-width: 700px;
	background-color:#FDEAD2;
	box-shadow: 5px 5px 10px 0px gray;
	visibility: hidden;
	z-index: 11;
}

h1{ /* Definition aller Überschriften */
	font-family: bangers;
	font-size: 50px;
	text-align: center;}

p{ /* Definition der normalen Texte */
	font-family: Yantranamav; 
	font-size: 25px;
	text-align: center;
}
a { /* Deinition der Links */
	font-family: Yantranamav; 
	font-size: 25px;
	text-align: center;
	color: #102B4B;
}
.Kreis { /* CSS-Klasse, die alle Kreise definiert */
	width: 100px;
	height: 100px;
	background-color: transparent; /* die Kreise sind zunächst transparent */
	pointer: cursor; 
}
/* IDs, die Aussehen und Position der einzelnen Fehlerkreise definiert. */
#KreisFehlerNase{ 
	position: absolute;
	top: 290px;
	right: 370px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	border-width: 4px;
	border-style: solid;
	border-color: transparent;
}

#KreisFehlerVogel{
	position: absolute;
	top: 230px;
	right: 200px;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	border-width: 4px;
	border-style: solid;
	border-color: transparent;
}

#KreisFehlerSchleife{
	position: absolute;
	top: 420px;
	right: 160px;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	border-width: 4px;
	border-style: solid;
	border-color: transparent;
}

#KreisFehlerAugen {
	position: absolute;
	top: 220px;
	right: 310px;
	width: 110px;
	height: 60px;
	border-radius: 100%;
	border-width: 4px;
	border-style: solid;
	border-color: transparent;
}
	
#KreisFehlerBlatt{
	position: absolute;
	top: 320px;
	right: 215px;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	border-width: 4px;
	border-style: solid;
	border-color: transparent;
}

#Textfeld { /* ID, die Aussehen und Position des Textfeld innerhalb des Türschlosses definiert. */
		position: absolute; 
		top: 310px; 
		left: 185px;
		padding: 10px;
		width: 50px;
		max-width: 50px;
		height: 30px;
		color: black;
		background-color: transparent;
		font-family: courier;
		font-size: 30px;
	}
	#OPEN { /* ID, die Aussehen und Position des OPEN-Knopfs definiert. */
		width:70px; 
		position: absolute; 
		top: 484px; 
		left: 220px;}

	#DELETE { /* ID, die Aussehen und Position des DELETE-Knopfs definiert. */
		position: absolute; 
		top: 484px; 
		left: 148px; 
		width: 70px;
}
/* IDs, die Aussehen und Position der jeweiligen Zahlen-Tasten definiert. */
	#Taste1 {
		position: absolute; 
		top: 370px; 
		left: 148px; 
		width: 43px;}
	
	#Taste2 {
		position: absolute; 
		top: 370px; 
		left: 198px; 
		width: 43px;}

	#Taste3 {
		position: absolute; 
		top: 370px; 
		left: 248px; 
		width: 43px;}

	#Taste4 {
		position: absolute; 
		top: 408px; 
		left: 148px; 
		width: 43px;}

	#Taste5 {
		position: absolute; 
		top: 408px; 
		left: 198px; 
		width: 43px;
	}
	#Taste6 {
		position: absolute; 
		top: 408px; 
		left: 248px; 
		width: 43px;}

	#Taste7 {
		position: absolute; 
		top: 446px; 
		left: 148px; 
		width: 43px;}

	#Taste8 {
		position: absolute; 
		top: 446px; 
		left: 198px; 
		width: 43px;}

	#Taste9 {
		position: absolute; 
		top: 446px; 
		left: 248px; 
		width: 43px;}	

/* IDs, die Aussehen und Position der drei Formen auf dem Safe definiert. Quelle zur Definiton der CSS-Formen: https://pixeltuner.de/css3-formen/ */ 
#Viereck {
		position: absolute;
		bottom: 340px;
		left: 390px;
		width: 70px; 
   		height: 70px; 
   		background-color: blue; /* zunächst ist die Farbe der Formen blau */
	
	}
	#Dreieck {
		position: absolute;
		bottom: 240px;
		left: 385px;
		width: 0; 
   		height: 0; 
   		border-bottom: 80px solid; 
		border-bottom-color: blue; /* zunächst ist die Farbe der Formen blau */
   		border-left: 40px solid transparent; 
   		border-right: 40px solid transparent;

	}
	#Kreis {
		position: absolute;
		bottom: 140px;
		left: 385px;
  		width: 80px;
  		height: 80px;
 		border-radius: 50px;
  		background-color: blue; /* zunächst ist die Farbe der Formen blau */
	}

#SafeOpen { /* ID, die den OPEN-Knopf des Safes definiert. */
	position: absolute;
	width: 150px;
	bottom: 150px;
	left:150px; 
	cursor: pointer;
}
#Spinne { /* ID, die das Spinnen-GIF definiert. */ 
	position: absolute;
	width:700px;
	left: 500px;
	bottom: 570px;
	animation-duration: 5s; /* das GIF wird 5 Sekunden abgespielt. */ 
	visibility: hidden; 
}

#time { /* ID, die das Aussehen des Countdowns definiert */ 
	position: absolute;
	width: 1000px;
	bottom: 120px;
	left: 800px;
	font-family: bangers;
	text-align: center;
	font-size: 90px;
	z-index: 10; /* der Countdown ist immer im Vordergrund */
	visibility: visible;
}

#countdown{ /* ID, die das Aussehen des Countdowns definiert */ 
	position: absolute;
	width: 300px;
	bottom: 50px;
	left: 1150px;
	z-index: 10; /* der Countdown ist immer im Vordergrund */
	visibility: visible;
}
#BUBBLE { /* ID, die das Fenster definiert, welches sich öffnet, wenn der Countdown vorbei ist. */
	position: absolute;
	padding: 50px;
	left: 300px;
	bottom: 200px;
	border-style: solid;
	border-color: #C00B0E;
	border-width: 40px;
	border-radius: 30px 30px 30px 30px;
	max-width: 700px; /* maximale Breite */ 
	background-color: white;
	font-family: yantramanav;
	font-size: 30px;
	text-align: center;
	visibility: hidden;
	z-index: 11; 
}

#Startknopf{ /* ID, die Aussehen und Position des Startknopfs definiert */
	position:absolute;
	bottom: 260px;
	left: 500px;
	visibility: visible;
	z-index: 10;
}