/*    START: Verlinkte Bereiche auf Grafik von clean-test.de.tl/Verlinkung-im-Bild.htm  */
/* Eigenschaften für das Bild */
.grafik {
  list-style-type:none;
   width: 478px;
   height: 716px;
  padding: 0px; margin: 10px; 
  background-image: url(https://cmsimplexh.de/userfiles/images/tooltips/ammeerohnetext.jpg);
  border: 10px solid #fff;
  box-shadow: 5px 5px 15px #444;
  position: relative; }

/*  Eigenschaft für alle 3 Rahmen  w70 px h70 px  , position:absolute; */  
.grafik  a {
   position:absolute;
   display: block;
/*   width: 70px;
   height: 30px;    */
   text-decoration: none; 
   }

 /* Position Link 1: Wort: fliegen  */
.position_1 a {
   top: 40px;
   margin-left: 40px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  /* um Felder sichtbar zu machen = 2px solid green;  */
   }

 /* Position Link 2: Wort: segeln   */
.position_2 a {
   margin-top: 160px;
   margin-left: 250px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }

 /* Position Link 3: Wort: schwimmen   */
.position_3 a {
   margin-top: 200px;
   margin-left: 160px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 4: Wort: spielen   */
.position_4 a {
   margin-top: 300px;
   margin-left: 40px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }

 /* Position Link 5: Wort: hüpfen   */
.position_5 a {
   margin-top: 320px;
   margin-left: 260px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 6: Wort: essen   */
.position_6 a {
   margin-top: 450px;
   margin-left: 60px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 7: Wort: trinken   */
.position_7 a {
   margin-top: 450px;
   margin-left: 150px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 8: Wort: trinken   */
.position_8 a {
   margin-top: 450px;
   margin-left: 350px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 9: Wort: schlafen   */
.position_9 a {
   margin-top: 620px;
   margin-left: 250px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 10: Wort: krabbeln   */
.position_10 a {
   margin-top: 600px;
   margin-left: 140px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }
   
 /* Position Link 11: Wort: lesen   */
.position_11 a {
   margin-top: 600px;
   margin-left: 40px;
   width: 80px;
   height: 40px;
   border: 0px solid #ddd;  
   }

 /* für das Tooltip-Fenster mit Infotext      margin-top: 100px;   */
span.text { 
   position:absolute;
   width: 90px;
   color: #fff!important;
   padding: 8px;
   text-align: center;
   border-radius: 10px;
   margin-top: 60px;
   margin-left: 0px;
   background-color: #0057b0;
   border: 1px solid #c9c9c9;
   z-index: 90;
   visibility: hidden;
   overflow:hidden; 
   }
   
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* Arrow at the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0057b0 transparent;
}

 /* bei Mauskontakt sichtbar */
.rahmen:hover span.text { visibility: visible; 
}
/*    ENDE: Verlinkte Bereiche auf Grafik  */