/* Minimal, accessible tooltips (Dark UI) */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip[data-label] {
  border-bottom: 1px dotted rgba(148,163,184,.6); /* subtle indicator */
}

/* Bubble */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  max-width: 560px;          /* breiter (vorher 480px) */
  background: #0b0b0c;
  color: #e5e7eb;
  border: 1px solid #3f3f46;
  padding: .9rem 1rem;       /* mehr Innenabstand */
  border-radius: .6rem;
  font-size: .85rem;         /* etwas größer */
  line-height: 1.35rem;      /* mehr Luft */
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  will-change: opacity;
  z-index: 9999;
  white-space: pre-line;
}

/* Arrow */
.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 115%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #3f3f46; /* border color */
  filter: drop-shadow(0 -1px 0 #0b0b0c);
  opacity: 0;
  transition: opacity .15s ease;
  will-change: opacity;
  z-index: 10000;
}

/* Hover & .is-open (for touch via JS) */
.tooltip:hover::after,
.tooltip:hover::before,
.tooltip.is-open::after,
.tooltip.is-open::before {
  opacity: 1;
}

/* Mobile: keep bubble above and centered on narrow screens */
@media (max-width: 480px) {
  .tooltip::after { max-width: 90vw; }
}

/* When the JS portal is active, hide CSS pseudo-tooltips globally */
.js-tooltips .tooltip::before,
.js-tooltips .tooltip::after {
  display: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tooltip::before,
  .tooltip::after {
    transition: none;
  }
}