/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
/* Tooltip container */
.tooltip {
  position: absolute;  /* vorher: relative; */
  display: inline-block;
  border-bottom: none; /* Wenn eine gepunktete Linie unter dem Text erscheinen soll: 1px dotted black; */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  max-width: auto; /* 120 px oder 400px; */
  height: auto;
  background-color: #0057b0;
  color: #fff;
  text-align: center; /* Textausrichtung in der Box */
  padding: 5px;  /* damit der Text nicht am inneren Rand klebt */
  margin: 4px;   /* damit die Toolbox nicht am unteren Wortrand klebt, und der Pfeil evtl im Buchstaben darüber verschwindet */
  border-radius: 6px;
 
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
}

/* Tooltip unterhalb des Wortes */
.tooltip .tooltiptext {
  max-width: auto; /* 120 px oder 400px; */
  height: auto;
  top: 100%;
  left: 50%;
  margin-left: -40%; /* Nutze die halbe Weite (120/2 = 60 oder 100%/2 = 50%), um den Tooltipp zu zentrieren. Bei max-width: auto; kann man mit den % spielen. -70% ist näher nach links; -30 % weiter nach rechts  */
}
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* Pfeil oberhalb der Tooltip-Box */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0057b0 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */