/* assets/wordcloud.css */

/* Wrapper + Hint (bleibt wie gehabt) */
.wordcloud-wrap {
  max-width: 100%;
}

.wordcloud-hint {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 0.5rem;
}

/* =========================================================
   NEU: HTML-Variante (WordCloud rendert <span> in eine Box)
   Damit kann wirklich NUR das einzelne Wort hervorgehoben werden,
   ohne „Kasten“/Bounding-Box-Effekte.
   ========================================================= */

.wordcloud-box {
  position: relative;
  width: 100%;
  min-height: 320px; /* wird in JS dynamisch gesetzt */
  overflow: hidden;  /* verhindert Überlauf */
}

/* Alle Wörter (Spans), die wordcloud2.js erzeugt */
.wordcloud-box span {
  transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease;
  cursor: pointer;
  will-change: transform, opacity;
}

/* Wenn gerade ein Wort gehovert wird: alle anderen dimmen */
.wordcloud-box.is-hovering span {
  opacity: 0.25;         /* Dim-Stärke (anpassbar) */
  filter: saturate(0.85);
}

/* Das aktive Wort bleibt voll sichtbar */
.wordcloud-box.is-hovering span.is-active {
  opacity: 1;
  filter: saturate(1.1);
}

/* =========================================================
   ALT (Canvas-Layer-Variante) – NICHT MEHR BENÖTIGT
   Falls du noch Canvas nutzt, lass diese Sektion drin.
   Wenn du auf .wordcloud-box umgestellt hast, kannst du sie löschen.
   ========================================================= */

.wordcloud-stage {
  position: relative;
  width: 100%;
}

.wordcloud-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.wordcloud-base {
  position: relative;
  z-index: 1;
}

.wordcloud-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}