.RahmenGdS {
	
		  	margin: 0;
 			font-family: "Rimouski", sans-serif;
 			font-weight: 900;
	
 			background-image: url("../bilder/Hintergrund_final.png");
	  		background-repeat: no-repeat;
  			background-size: cover;

  			color: #003366;
			display: flex;
  			flex-direction: column;
			height: 800px;
			width: 1400px;
	
              /* Basiszustand = dunkel */
 			position: relative;                 /* gleichzeitig neuer Bezug für absolute Kinder */
  			filter: grayscale(85%);
  			transition: filter .25s ease;       /* optional sanftes Überblenden */
			}

.RahmenGdS.licht-an {                 /* helles Zimmer */
	 		filter: grayscale(0%);              /* Filter bleibt -> keine Layout-Sprünge */
			}



.nav-containerGame {
  max-width: 1300px;
	height: 20px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Timer */

    .game-area { display:flex; flex-direction:column; align-items:center; justify-content:center; height:80vh; }
    #endBtn { }
    #countdownDisplay { font-size:1.5rem; color:#f97316; }

/* Leahs Elemente */

	    #schrank_zu 	    	{ position: absolute; left: 1010px;  top: 150px; z-index:5; width: 420px; height: 320px;}
	    #schrank_zu_tresor 		{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 420px; height: 320px;}
    	#schrank_auf 	    	{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 420px; height: 320px;}
	    #tresor_zu          	{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 0px;   height: 0px;}
	    #mikroskop          	{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 420px; height: 320px;}
	    #reagenzglaeser     	{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 420px; height: 320px;}
	    #spinnennetz        	{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 420px; height: 320px;}
	    #schild        			{ position: absolute; left: -4000px; top: 10px; z-index:7; width: 80px; height: auto;}
	    #schildgross        	{ position: absolute; left: -4000px; top: 10px; z-index:15; width: 80px; height: auto;}
	    #periodensystem     	{ position: absolute; left: -4000px; top: 10px; z-index:2; width: 80px; height: auto;}
	    #periodensystemgross	{ position: absolute; left: -4000px; top: 10px; z-index:15; width: 80px; height: auto;}
	    #schreibtisch_zu 		{ position: absolute; left: 730px; top: 440px; z-index:5; width: 80px; height: auto;}
	    #schreibtisch_auf 		{ position: absolute; left: -4000px; top: 100px; z-index:5; width: 80px; height: auto;}
        #buch 		            { position: absolute; left: -4000px; top: 100px; z-index:2; width: 20px; height: auto;}
		#gleichung 		        { position: absolute; left: -4000px; top: 100px; z-index:2; width: 20px; height: auto;}
		#gleichung_gross 		{ position: absolute; left: -4000px; top: 10px; z-index:50; width: 20px; height: auto;}


    	img				    	{ cursor: pointer; } 
		
body {
	
    }

/* Tresor */

#popupTresor {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  background: #222;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: white;
  font-family: sans-serif;
  text-align: center;
  z-index: 1000;
  width: 300px;
}

#codeDisplayTresor {
  font-size: 32px;
  letter-spacing: 10px;
  margin: 10px 0 20px;
  border: 2px solid #555;
  padding: 10px;
  border-radius: 10px;
  background-color: #534F4F;
}

#keypadTresor {
  padding: 15px;
  font-size: 20px;
  background-color: #534F4F;
  color: #000;
  border: 2px solid #aa9900;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#keypadTresor button {
  padding: 15px;
  font-size: 20px;
  background-color: #FFD626;
  color: black;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#keypadTresor button:hover {
  background-color: #e6b800;
}
			
		@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.tresor-offen1 {
	position: fixed;
	left: 1230px;
	top: 391px;
	z-index: 1;
	height: 90px;
  	animation: fadeIn 0.5s ease-out forwards;
}

.rezept1 {
	position: fixed;
	left: 1000px;
	top: 391px;
	z-index: 1;
	height: 90px;
  	animation: fadeIn 0.5s ease-out forwards;
}
		
.close-btnTresor {
  float: right;
  background: none;
  border: none;
  font-size: 24px;
  color: white;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-btnTresor:hover {
  color: #ccc;
}

/* Pop-up-Hintergrund für Rezept */
#popupGegengift {
  display: none;
  position: fixed;
  top: 100px;
  left: 500px;
	width: 400px;
	height: 550px;
  padding: 20px;
  background-color: white;
  border: 2px solid #000;
  z-index: 1000;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  overflow: auto;
  border-radius: 8px;
}

/* Bild im Rezept-Pop-up */
#popupGegengift img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

/* Schließen-Button oben rechts */
#popupGegengift button {
		position: absolute;
  		top: 0px;
  		right: 8px;
  		font-size: 20px;
  		font-weight: bold;
  		color: #900;
  		cursor: pointer;
  		z-index: 20;
  		background: none;
  		border: none;
}

#popupGegengift button:hover {
  color: #c00;
  transform: scale(1.1);
}



/* Spinnennetz */
		
   #game-containerSpinnennetz {
      position: absolute;
      top: 135px;
      left: 310px;
      width: 230px;
      height: 230px;
      cursor: pointer;
      z-index: 10;
    }

    #spiderweb {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }

    #uvLayerLicht {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      display: none;
    }

    #drawingCanvasSpiel {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    #light-switchRaum {
      position: absolute;
      top: 300px;
      left: 237px;
      width: 25px;
      height: 40px;
      background-color: #333;
      border: 2px solid #999;
      border-radius: 4px;
      cursor: pointer;
      z-index: 20;
    }

    #light-switchRaum::before {
      content: '';
      display: block;
      width: 15px;
      height: 15px;
      margin: 5px auto;
      background-color: #ccc;
      border-radius: 50%;
      transition: background-color 0.3s;
    }

    #light-switchRaum.active::before {
      background-color: yellow;
    }



    #popup-overlaySpinnennetz {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1000;
    }

    #popupSpinnennetz {
      position: absolute;
      top: 400px;
      left: 700px;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.9);
      padding: 0;
      border-radius: 12px;
      overflow: hidden;
      width: 360px;
      height: 360px;
    }

    #popup-innerSpinnennetz {
      	position: relative;
		top: 0px;
		left: 0px;
      	width: 100%;
      	height: 100%;
    }

    #popup-spiderweb {
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    #popup-uvLayerLicht,
    #popup-drawingCanvasSpiel {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    #popup-closeSpinnennetz {
		  position: absolute;
  		top: 0px;
  		right: 8px;
  		font-size: 20px;
  		font-weight: bold;
  		color: #900;
  		cursor: pointer;
  		z-index: 20;
  		background: none;
  		border: none;
    }	


/* Mikroskop */
		
 	#microscopeM {
  		position: absolute;
  		top: 348.5px;
  		left: 680px;
  		width: 55px;
  		height: auto;
  		cursor: pointer;
  		z-index: 3;
}

    #startScreenM, #endScreenM {
      position: absolute;
      top: 50%;
      left: 50%;
	  z-index: 9999;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.95);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 12px rgba(0,0,0,0.2);
      text-align: center;
      display: none;
      width: 400px;
    }

    #gameContainerM {
      	position: absolute;
      	top: 380px;
      	left: 700px;
	  	z-index: 9999;
      	transform: translate(-50%, -50%);
      	width: 500px;
      	border-radius: 500px;
		background: rgba(0, 0, 0, 0.5);
  		background-color: rgba(0, 0, 0, 0.5);
      	box-shadow: 0 0 12px rgba(0,0,0,0.2);
      	display: none;
		margin: 50px auto;
    }

    #gameHeaderM {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #eee;
      padding: 10px 16px;
      border-bottom: 1px solid #ccc;
      font-size: 16px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

.closeButtonM {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 20px;
  font-weight: bold;
  color: #900;
  cursor: pointer;
  z-index: 20;
  background: none;
  border: none;
}

    #gameM {
		display: flex;
		justify-content: center;
		align-content: center;
      	width: 500px;
      	height: 400px;
      	position: relative;
      	overflow: hidden;
		background-color: black;
      	border-bottom-left-radius: 12px;
      	border-bottom-right-radius: 12px;
		z-index: 9;
    }

#scopeViewM {
	top: 55px;
	left: 75px;
  	width: 350px;
  	height: 350px;
  	border-radius: 300px;
  	background-color: white;
  	position: absolute;
  	overflow: hidden;
  	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

    .mikrobeM {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      position: absolute;
      cursor: pointer;
    }

    .buttonM {
      padding: 8px 16px;
      font-size: 16px;
      margin-top: 10px;
      border-radius: 8px;
      border: none;
      background-color: #337ab7;
      color: white;
      cursor: pointer;
    }

    .buttonM:hover {
      background-color: #286090;
    }



/* Lisas Elemente */

img.interaktiv {
      position:absolute;
      cursor: pointer;
    }

    /* Positionierungen */

    

  #computer {
  left: 275px;
  top: 267px;
  width: 200px;
  height: auto;
	  z-index: 10;
}
	  
	  
	  /*Rätsel Computer*/
	  
.frage-container {
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(255, 255, 255, 0.9);
      padding: 15px;
      border-radius: 8px;
      display: none;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
	  z-index: 20;
    }

    .frage-container input {
      padding: 5px;
      margin-top: 10px;
      width: 200px;
    }
	  
 /* Schild-Bild als sichtbares Element */
   /*  #schild {
      position: absolute;
      top: 190px;
      left: 1200px;
      width: 80px;
      height: auto;
      cursor: pointer;
		z-index: 50;
    } */

    /* Formular, das eingeblendet wird */
    #eingabeFormular {
      position: absolute;
      top: 620px;
      left: 520px;
      background-color: rgba(255, 255, 255, 0.95);
      padding: 20px;
      border: 2px solid #333;
      border-radius: 8px;
      display: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		z-index: 15;
    }

    #eingabeFormular input {
      width: 30px;
      margin-right: 5px;
      text-align: center;
    }

    #eingabeFormular button {
      margin-top: 10px;
      padding: 5px 10px;
      cursor: pointer;
    }

    #erfolg {
      margin-top: 10px;
      font-weight: bold;
    }	  
	   
/*Ende Schild*/
	
	  
/* Glasscherben-Rätsel */
	  
	  .glasscherbe {
      position: absolute;
      width: 80px;
      height: 50px;
      cursor: grab;
      user-select: none;
    }







/* Terrarien */
		#Terrarium1		{ position: absolute; left: 720px; top: 287px; z-index:2;}
		#Terrarium2		{ position: absolute; left: 720px; top: 184px; z-index:2;}
		#Terrarium3		{ position: absolute; left: 844px; top: 287px; z-index:2;}
		#Terrarium4		{ position: absolute; left: 844px; top: 184px; z-index:2;}
		
/* Gläser mit Spinnen */
		#Spinnenglas1 	{ position: absolute; left: 755px; top: 395px; z-index:2;}
		#Spinnenglas2 	{ position: absolute; left: 805px; top: 395px; z-index:2;}
		#Spinnenglas3	{ position: absolute; left: 855px; top: 395px; z-index:2;}
		#Spinnenglas4	{ position: absolute; left: 905px; top: 395px; z-index:2;}
	
/*  Fenster im Terrarien PopUp */
.sp-popup{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	width:1150px;                
	padding:24px 20px 32px;
	padding-top: 45px;
	background:#fafafa; 

	border-radius:14px;
	box-shadow:0 0 18px rgba(0,0,0,.4);
	z-index:5;                   
}

	/* Spinnen-Overlay */
	.sp-overlay{
	  position:fixed;
	  top:0;
	  left:-4000px;          /*  über NeuePosition verschieben */
	  width:100vw;
	  height:100vh;
	  background:rgba(0,0,0,.55);
	  z-index:2000;
	  transition:left .25s ease;
}

	.sp-area{
	  /* zwei Reihen – oben Terrarien, unten Gläser */
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  grid-template-rows: auto auto;
	  gap: 20px 24px;                 /* Zeilen-/Spaltenabstand */
	  justify-items: center;
	  align-items: center;
	  width: 100%;
	  user-select: none;
	}

	/* Terrarien (Reihe 1) */
	.sp-terra{
	  grid-row: 1;
	  width: 260px;          
	  height :auto;          
	}

	/* Spinnengläser (Reihe 2) */
	.sp-glas{
	  grid-row: 2;
	  width: 120px;
	  height: auto;
	  cursor: move;
	}

	#sp-close	{ position: absolute; left: 1145px; top: 13px; z-index:3;}	
	#sp-reset	{ position: absolute; left: 1090px; top: 13px; z-index:2;}



/* Telefon */

	#Telefon 		{ position: absolute; left: 228px; top: 234px; z-index:2;}
	#Telefon_gross 	{ position: absolute; left: -4000px; top: 234px; z-index:15;}


	#Telefon_overlay{position:fixed; left:-4000px; top:0; width:100vw; height:100vh; background:rgba(0,0,0,.55); z-index:2500;}

	.Telefon_box{
	  position:absolute;
	  width:520px;                /* gerne anpassen */
	  padding:22px 20px 30px;
	  background:#fafafa;
	  border-radius:12px;
	  box-shadow:0 0 14px rgba(0,0,0,.4);
	  text-align:center;
	  font-family:Arial, sans-serif;
	}

	/* Eingabe + Button */
	#Telefon_answer{width:150px; text-align:center;}
	.btn_Telefon     {margin-top:10px;}

	/*  Schließen-Button  */
	.close-btn{
	  position:absolute;
	  top:8px;
	  right:12px;
	  width:34px;
	  height:34px;
	  border:none;
	  border-radius:50%;
	  background:#eee;
	  font-size:24px;
	  line-height:1;
	  cursor:pointer;
	  color:#555;
	  box-shadow:0 0 4px rgba(0,0,0,.25);
	  transition:background .2s ease;
	}
	.close-btn:hover{
	  background:#ddd;
	}
	.close-btn:focus-visible{
	  outline:2px solid #1a73e8;
	}




/* Pinnwand Elemente */ 
	#PW_Terrarien_Zettel 		{ position: absolute; left: 550px; top: 234px; z-index:2;}
	#PW_Terrarien_Zettel_gross	{ position: absolute; left: -4000px; top: 100px; z-index:15;}
	#PW_Kalender_Notiz			{ position: absolute; left: 365px; top: 115px; z-index:10;}
	#PW_Kalender_Notiz_gross	{ position: absolute; left: -4000px; top: 100px; z-index:15;}
	#PW_Proteine_Notiz			{ position: absolute; left: 515px; top: 120px; z-index:10;}
	#PW_Proteine_Notiz_gross	{ position: absolute; left: -4000px; top: 100px; z-index:15;}


	/* Experiment Aufbau mit Reagenzgläsern */
	#Reagenz_rot	{ position: absolute; left: 577px; top: 400px; z-index:2;}
	#Reagenz_gruen	{ position: absolute; left: 597px; top: 400px; z-index:2;}
	#Reagenz_blau	{ position: absolute; left: 617px; top: 400px; z-index:2;}

	#Mischung_klar		{ position: absolute; left: 644px; top: 388px; z-index:2;}
	#Mischung_schwarz	{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_magenta	{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_cyan		{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_gelb		{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_braun		{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_rot		{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_blau		{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	#Mischung_gruen		{ position: absolute; left: -4000px; top: 400px; z-index:2;}
	
	
/* Experiment-Minispiel */
	.chem-overlay{ 			
		position: fixed; 
		top: 0;               
		left: -4000px;                       
		width: 100vw; 
		height:100vh;
		background: rgba(0,0,0,.55);
		z-index: 2000;
		transition: left .25s ease;           /* weiches Ein-/Ausfahren    */
	}

	/* Popup-Fenster Experiment */
	.chem-popup{
		position: absolute; 
		top: 50%; 
		left: 50%;
		transform: translate(-50%,-50%);
		width: 480px;
		padding: 24px 16px 32px;
		background: #fafafa; 
		border-radius: 14px;
		box-shadow: 0 0 18px rgba(0,0,0,.4);
		text-align: center;
	}

	.chem-close{
		position: absolute; 
		top: 6px; 
		right: 10px;
		background: none; 
		border: none;
		font-size: 28px; 
		font-weight: bold; 
		cursor: pointer;
		line-height: 1; 
		color: #900;
	}

	/* Spielfläche Experiment */
	.chem-area{
		position: relative; 
		width: 100%; 
		height: 250px;
		margin-bottom: 16px;
	}

	/* Reagenzgläser & Gasbrenner */
	.chem-item{
		position: absolute; 
		cursor: pointer; 
		width: 90px;
		transition: transform .15s;
	}
	.chem-item:hover{ transform: scale(1.05); }

	
	#chem_Gasbrenner 	{ left:340px; bottom:20px; width: 50px;}
	#chem_Reagenz_rot   { left:80px;  bottom:20px; width: 50px;}
	#chem_Reagenz_gruen { left:160px; bottom:20px; width: 50px;}
	#chem_Reagenz_blau  { left:240px; bottom:20px; width: 50px;}

	.chem-mix{
	  position: absolute; 
		bottom: 10; 
		left: 365px;
		transform: translateX(-50%);
		width: 110px;
	}

	.chem-hint{ 
		margin: 0; 
		font-family: "Rimouski";
		font-size: .95rem; }


/* Steampunk-Seidenmanufaktur */

.ComingSoon {
		  	margin: 0;
 			font-family: "Rimouski", sans-serif;
 			font-weight: 900;
	
 			background-image: url("../bilder/CominSoon_Raum.png");
	  		background-repeat: no-repeat;
  			background-size: cover;

  			color: white;
			display: flex;
  			flex-direction: column;
			height: 753px;
			width: 1400px;
			}

.overlayCS {
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter dunkler Layer */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-boxCS {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  text-align: center;
  max-width: 1000px;
}

.release-dateCS {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #f97316;
}