body {
  font-family: system-ui, sans-serif;
  margin: 4rem;
}

.anchor-btn {
  anchor-name: --info-btn;
  padding: 0.6rem 1.2rem;
  font: inherit;
  cursor: pointer;
}

.tooltip {
  position-anchor: --info-btn;
  border: none;
  border-radius: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: #222;
  color: #fff;
  font-size: 0.9rem;
  margin: 0;

  /* Fallback zuerst (gilt ohne anchor()-Support): fixe Position relativ
     zum Viewport, sitzt "irgendwo" statt am Button. anchor() danach
     überschreibt nur wenn geparst — wie bei if()/@function ist ein
     unbekannter Funktionsaufruf in top/left keine Teil-, sondern eine
     GANZE Deklaration-ungültig-Situation, also fallback-first statt
     @supports. */
  top: 1rem;
  left: 1rem;
  top: calc(anchor(--info-btn top) - 0.5rem);
  left: anchor(--info-btn center);
  translate: -50% -100%;
}

@media (prefers-reduced-motion: no-preference) {
  .tooltip {
    transition: opacity 0.15s ease;
  }
}