/* Carabulario — Hotspot-Komponente
   Schritt 3: einheitliches Muster Tap → Puls → Card
   Voraussetzung: carabulario-tokens.css + carabulario-layout.css
*/

.hotspot-demo {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
}

.hotspot-demo__label {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 1;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.hotspot-layer {
  position: absolute;
  inset: 0;
}

/*
  Die interaktive Fläche ist exakt space-12 (= 3rem / 48px bei 16px Root).
  Der sichtbare Marker bleibt kompakter; die Berührungsfläche ist größer.
*/
.hotspot {
  position: absolute;
  inset-inline-start: var(--hotspot-x);
  inset-block-start: var(--hotspot-y);
  inline-size: var(--space-12);
  block-size: var(--space-12);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-hotspot-highlight);
  cursor: pointer;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

.hotspot__visual {
  position: relative;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  display: grid;
  place-items: center;
  border: calc(var(--base-unit) / 2) solid currentColor;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition:
    background var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-base);
}

.hotspot__visual::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-2) * -1);
  border: calc(var(--base-unit) / 2) solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.hotspot__dot {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
}

.hotspot:hover .hotspot__visual {
  transform: scale(var(--type-scale-ratio));
}

.hotspot[aria-pressed="true"] .hotspot__visual {
  background: var(--color-hotspot-highlight);
  color: var(--color-surface);
}

.hotspot[aria-pressed="true"] .hotspot__visual::before {
  animation: carabulario-hotspot-pulse var(--motion-pulse);
}

@keyframes carabulario-hotspot-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }

  50% {
    opacity: 0.75;
    transform: scale(var(--type-scale-ratio));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot:hover .hotspot__visual {
    transform: none;
  }

  .hotspot[aria-pressed="true"] .hotspot__visual::before {
    opacity: 0.75;
  }
}

/* Gelernte Punkte verwenden Erfolg nur semantisch, nie dekorativ. */
.hotspot[data-learned="true"]:not([aria-pressed="true"]) .hotspot__dot {
  background: var(--color-success);
}