.mousegrid {
   display: grid; 

   grid-template-rows: 50px 50px 400px 100px 50px 100px auto;
   grid-template-columns: auto 100px 100px 50px 100px 100px auto;
   
   grid-template-areas: 
	'statement statement statement statement statement statement statement'
	'. . . start . . .'
  'grund grund grund grund grund grund grund'
	'. links feedback feedback feedback rechts .'
	'. . . . . . .'
	'. . sicherheit sicherheit sicherheit . .'
	'. . . . . . .';
   
   gap: 0px;
   height: 100%;

   text-align: center;


}
  
#item-0 {

   
   grid-area: statement;
   
   display: flex;
   justify-content: center;
   align-items: center;
}
#item-1 {

   background-color: #aaaaaa; 
   grid-area: start;

   font-size: 80%;
   display: flex;
   justify-content: center;
   align-items: center;


}
#item-2 {

  
   grid-area: links;

   border: 3px solid black;
   display: flex;
   justify-content: center;
   align-items: center;
}
#item-3 {

  
   grid-area: rechts;
   
   border: 3px solid black;
   display: flex;
   justify-content: center;
   align-items: center;
   
}
#item-4 {

  
   grid-area: feedback;
   
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
#item-5 {

  
   grid-area: grund;
   
   display: flex;
   justify-content: center;
   align-items: center;
}
#item-6 {

 
   grid-area: sicherheit;
   
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

@media not (hover:hover), not (pointer: fine) {
  #finehoverbutton {
    display:none;
  }
}

@media (hover:hover) or (pointer: fine) {
  #notfinehoverbutton {
    display:none;
  }
}