/* ==========================================================================
   Puels.legal · Beratungssystem-Kreis — Hover-Tooltips
   Erscheinen beim Hover/Focus über die 4 Phase-Nodes (01..04).
   ========================================================================== */

.phase-tooltip-host {
  position: relative; /* anchor for the tooltip */
}

/* Make phase-node hoverable */
.col-graphic--system svg .phase-node {
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.col-graphic--system svg .phase-node:hover,
.col-graphic--system svg .phase-node:focus-visible,
.col-graphic--system svg .phase-node.is-active {
  transform: scale(1.12);
  filter: drop-shadow(0 6px 14px rgba(212,179,106,0.45));
  outline: none;
}
.col-graphic--system svg .phase-node:hover circle,
.col-graphic--system svg .phase-node:focus-visible circle,
.col-graphic--system svg .phase-node.is-active circle {
  fill: #FBF6E8;
  stroke: #D4B36A;
  stroke-width: 2.5;
}
.col-graphic--system svg .phase-node:focus-visible circle {
  stroke-width: 3;
}

/* Tooltip element */
.phase-tooltip {
  position: absolute;
  z-index: 20;
  min-width: 180px;
  max-width: 240px;
  padding: 0.85rem 1rem;
  background: var(--navy, #14213D);
  color: var(--text-on-dark, #F5F2EA);
  border-radius: 10px;
  box-shadow:
    0 18px 36px -16px rgba(15,17,21,0.35),
    0 4px 12px -4px rgba(15,17,21,0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.95);
  transition:
    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
.phase-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, -16px) scale(1);
}

.phase-tooltip-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright, #D4B36A);
  margin: 0 0 0.35rem;
}

.phase-tooltip-text {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-on-dark, #F5F2EA);
}

/* Arrow pointing down at the node */
.phase-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--navy, #14213D);
  box-shadow: 4px 4px 8px -4px rgba(15,17,21,0.2);
}

/* Tooltip placed BELOW the node (when node is in upper half) */
.phase-tooltip.is-below {
  transform: translate(-50%, 8px) scale(0.95);
}
.phase-tooltip.is-below.is-visible {
  transform: translate(-50%, 16px) scale(1);
}
.phase-tooltip.is-below::after {
  bottom: auto;
  top: -6px;
  box-shadow: -4px -4px 8px -4px rgba(15,17,21,0.2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .col-graphic--system svg .phase-node,
  .phase-tooltip { transition: opacity 0.15s linear; }
  .col-graphic--system svg .phase-node:hover { transform: none; }
}