#centerframe{
  position:relative;
  height:601px;
  width:801px;
  left:50%;
  margin-left:-400px;
  background:transparent;
  border-color:transparent;
  border-width:3px;
  border-style:solid;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}

#Ablatt{
  visibility: visible;
  background: url("pic/newtask.png") no-repeat scroll;
  animation: rotating 2s linear;
  padding: 10px;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  background-color: #308080;
  left: 0px;
  top: 0px;
}


#diffi{
  visibility: hidden;
  background: url("pic/diffi1.png") no-repeat scroll 0 0 transparent;
  background-size: 48px;
  left: 72px;
  top: 0px;
  background-color: silver; /*#fe3654;*/
  background-position: center;
}

#counter{
  visibility: visible;
  background: url("pic/counter.png") no-repeat scroll 0 0 transparent;
  	background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 550px;
  top: 0px;
  background-color: #808080; /*#fe3654;*/
  background-position: center;
}


#howto{
	visibility: hidden;
	position:absolute;
  height:180px;
  width:776px;
  left:0px;
  top:400px;
  background:silver;
  border-color:#808080;
  border-width:3px;
  border-style:solid;
	border-radius:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	color:white;
	padding:10px;
	z-index:100;
}
#okok{
	position:absolute;
  visibility: hidden;
  left: 680px;
  top: 120px;
  background-color: #808080;
  background-position: center;
}


#nuller{
	visibility: hidden;
	position:absolute;
  height:140px;
  width:266px;
  left:258px;
  top:220px;
	text-align: center;
  background:silver;
  border-color:#808080;
  border-width:3px;
  border-style:solid;
	border-radius:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	color:white;
	padding:10px;
	z-index:50;
}
#yesnull{
	position:absolute;
  visibility: hidden;
  left: 20px;
  top: 80px;
  background-color: #808080; /*  silver; #fe3654;*/
  background-position: center;
}
#nonull{
	position:absolute;
  visibility: hidden;
  left: 160px;
  top: 80px;
  background-color: #808080;
  background-position: center;
}
 
#coach{
  visibility: visible;
  background: url("pic/coach.png") no-repeat scroll 0 0 transparent;
  background-size: 48px;
	  background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 680px;
  top: 0px;
  background-color: #308080; /*  #fe3654;   */
  background-position: center;
}


/* fadinglinetop  Image: Verhalten, Aussehen, Lage*/
#fadinglinetop{
  visibility: visible;
  left: 0px;
  top: 215px;
  width: 800px;
  height: 2px;
  background-color: #808080;
}

#fadinglinetopleft{
  position: absolute;
  visibility: visible;
  left: -283px;
  top: 215px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, white, #808080);
}

#fadinglinebutleft{
  position: absolute;
  visibility: visible;
  left: -283px;
  top: 527px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, white, #808080);
}

#fadinglinetopright{
  position: absolute;
  visibility: visible;
  left: 800px;
  top: 215px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, #808080, white);
}

#fadinglinebutright{
  position: absolute;
  visibility: visible;
  left: 800px;
  top: 527px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, #808080, white);
}

#fadinglinebut{
  visibility: visible;
  left: 0px;
  top: 527px;
  width: 800px;
  height: 2px;
  background-color: #808080;
}

#zurueck{
  visibility: visible;
  background: url("pic/zurueck.png") no-repeat scroll 0 0 transparent;
	background-size: calc(100% - 14px) calc(100% - 14px);
	background-position: center center;
  left: 0px;
  top: 480px;
  background-color: #808080;
  background-position: center;
}


#hilfe{
  visibility: visible;
  background: url("pic/helpme.png") no-repeat scroll 0 0 transparent;
    background-size: calc(100% - 14px) calc(100% - 14px);
		background-position: center center;
  left: 680px;
  top: 480px;
  background-color: #808080;
  background-position: center;
}

#leimisch{
  visibility: hidden;
  background: url("pic/diffipuzz.png") no-repeat scroll 0 0 transparent;
  background-size: 48px;
  left: 360px;
  top: 536px;
  background-color: #808080;
  background-position: center;
}

#ersatz{
  visibility: visible;
  display: none;
  background-size: 48px;
  left: 592px;
  top: 536px;
  background-color: #808080;
  background-position: center;
}

.blubb:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;
}

/* Übungs-Inhalte */
#teller{
  visibility: visible;
  position: absolute;
  font-size: 28.8px;
  left: 150px;
  top: 40px;
  width: 500px;
  height: 80px;
  font-weight: normal;
}

#eisenbahn{
  position: absolute;
  left: 0px;
  top: 150px;
  width: 800px;
  height: 72px;
  background-color: transparent; 
}

#lok{
  position: absolute;
  background: url("pic/lokblau.png") no-repeat scroll 0 0 transparent;
  background-size: 76px;
  background-position: center;
  background-color: transparent; /*green	; #308080;	#308080;  */
  left: 2px;
  top: 0px;
  width: 76px;
  height: 72px;
}

#dropzone{
  position: absolute;
  padding-top: 80px;
  border-bottom: 5px solid grey;
  left: 260px;
  top: 250px;
  width: 280px;
  height: 46px;
  background-color: transparent; 
  display: flex;
  flex-direction: row;
}

#schaffner{
	visibility: visible;
  position: absolute;
  background: url("pic/schaffner.png") no-repeat scroll 0 0 transparent;
  left: 580px;
  top: 240px;
  width: 140px;
	height: 230px;
	background-size: calc(100%) calc(100%);
	background-position: center center;
  background-color: transparent; 
}

.waggon{
  position: absolute;
  background: url("pic/wagen.png") no-repeat scroll 0 0 transparent;
  background-size: 72px;
  background-position: center;
  background-color: transparent; /*green	; #308080;	#308080;  */
  top: 0px;
  width: 72px;
  height: 75px;
}

.kiste{
  position: relative;
  background: url("pic/kiste.png") no-repeat scroll 0 0 transparent;
  background-size: 70px;
  background-position: center;
  background-color: transparent; /*green	#308080; #308080;	#308080;  */  
  width: 70px;
  height: 46px;
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.colordiv{
  position: absolute;
  border: none;
  z-index: 30;
}

.kachel{
  position: absolute;
  width: 120px;
  height: 120px;
  color: #FFF;
  font-size: 22px;
  border-radius: 14px;

  padding: 0px;
  margin: 0px;
  cursor: pointer;
  border: none;
  z-index: 60;
}
.broadkachel{
  position: absolute;
	display: flex; /* Macht den Button zu einem Flex-Container */
  justify-content: center; /* Zentriert den Inhalt (hier das p-Tag) horizontal */
  align-items: center;
  width: 100px;
  height: 65px;
  color: #FFF;
  font-size: 26px;
	font-weight: bold;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: none;
  z-index: 60;
}
.pp{
  font-size: 2em;
  color: #FFF;
  position: absolute;
  left: 20px;
  top: -24px;
}
.ppa{
  font-size: 1em;
  color: #FFF;
  
  left: 15px;
  top: -8px;
}
.pnormal{
  font-family: Arial, Helvetica, sans-serif;
}

.hook{
  font-size: 1em;
  font-weight: bold;
  color: #FFF;
  position: absolute;
  left: 44px;
  top: 16px;
}

@keyframes mymove {
  50% {transform: rotate(180deg);}
}

@keyframes mymoveback {
  50% {transform: rotate(180deg);}
}

@keyframes slideLeft {
  to {
    transform: translateX(-300%);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(300%);
  }
  to {
    transform: translateX(0);
  }
}