<style>
/* Positioniert den Container und ändert den Mauszeiger */
[data-tooltip] {
  position: relative;
  cursor: not-allowed !important; /* Zeigt den "Gesperrt"-Mauszeiger */
}

/* Baut die Tooltip-Sprechblase */
[data-tooltip]::after {
  content: attr(data-tooltip); /* Zieht den Text aus deinem Webflow-Attribut */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  padding: 8px 12px;
  background-color: #2a325d; /* Dunkles Grau-Blau */
  color: #ffffff;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none; /* Verhindert, dass der Tooltip selbst klickbar ist */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Kleines Dreieck unten am Tooltip (optional, sieht aber edel aus) */
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: #2d3748 transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

/* Einblenden beim Hover */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}
</style>