/* Das Basiselement - HIER WIRD DIE MARKIERUNG HINZUGEFÜGT */
.tooltip {
  position: relative;
  cursor: help;
  /* Fügt eine klassische, gestrichelte Unterstreichung hinzu */
  xtext-decoration: underline dashed; 
  /* Weicher Übergang für die Hintergrundfarbe */
  transition: background-color 0.3s ease; 
  border-bottom: none; /* Entfernt die alte punktierte Linie, falls vorhanden */
}
/* Der Hover-Zustand des Ziel-Elements */
.tooltip:hover {
  /* Fügt eine weiche, transluzente Hintergrundfarbe hinzu, um das Ziel zu markieren */
  background-color: rgba(0, 128, 255, 0.2); 
  /* Vergrößert den Bereich des Highlights leicht */
  border-radius: 4px; 
}
/* --- (Der Rest des Tooltip-Codes bleibt gleich) --- */
/* Die Tooltip-Textbox */
.tooltip::after {
  content: attr(data-text);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: max-content;
  max-width: 700px;
  background-color: #2c3e50;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  
  opacity: 0;
  visibility: hidden;
  /* Fügt translateY zur Animation hinzu für den 'Schweb-Effekt' */
  transition: opacity 0.3s ease, transform 0.3s ease; 
  z-index: 10;
}
/* Der kleine Pfeil */
.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #2c3e50 transparent transparent transparent;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
/* Hover-Effekt: Textbox, Pfeil einblenden und Ziel-Element markieren */
.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  /* Schiebt den Tooltip leicht nach oben, während das Ziel-Element hervorgehoben wird */
  transform: translateX(-50%) translateY(-4px); 
}