/* Cherry Wordcloud 
   ---------------- */

/* Stage: responsive Grundlayout */

.cherry-wordcloud-stage {
  /* THEME-Defaults (werden pro Breakpoint unten überschrieben) */
  --wc-theme-radius: 240;
  --wc-theme-track-spacing: 160;
  --wc-theme-dur: 25;
  --wc-theme-font-scale: 1;

  --wc-theme-max-width: 100%;
  --wc-theme-min-height: 30vh;
  --wc-theme-max-height: 40vh;
  --wc-theme-aspect-ratio: 1 / 1;
  --wc-theme-padding: 0;

  --cherry-wordcloud-radius:        var(--wc-page-radius,        var(--wc-theme-radius));
  --cherry-wordcloud-track-spacing: var(--wc-page-track-spacing, var(--wc-theme-track-spacing));
  --cherry-wordcloud-dur:           var(--wc-page-dur,           var(--wc-theme-dur));
  --cherry-wordcloud-font-scale:    var(--wc-page-font-scale,    var(--wc-theme-font-scale));

  --cherry-wordcloud-max-width:     var(--wc-page-max-width,     var(--wc-theme-max-width));
  --cherry-wordcloud-min-height:    var(--wc-page-min-height,    var(--wc-theme-min-height));
  --cherry-wordcloud-max-height:    var(--wc-page-max-height,    var(--wc-theme-max-height));
  --cherry-wordcloud-aspect-ratio:  var(--wc-page-aspect-ratio,  var(--wc-theme-aspect-ratio));
  --cherry-wordcloud-padding:       var(--wc-page-padding,       var(--wc-theme-padding));

  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--cherry-wordcloud-max-width);
  min-height: var(--cherry-wordcloud-min-height);
  max-height: var(--cherry-wordcloud-max-height);
  aspect-ratio: var(--cherry-wordcloud-aspect-ratio);
  padding: var(--cherry-wordcloud-padding);
  margin: 0 auto;
  box-sizing: border-box;

  /* KEIN transform hier! Sonst blendet nichts mit dem Hintergrund */
  transform: none;

  color: var(--cherry-wordcloud-fg, #ffffff);
}

/* neuer Scene-Wrapper für den Tilt */
.cherry-wordcloud-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(6deg);
  pointer-events: none; /* Events gehen weiter an Chips */
}

/* Chips sollen weiterhin nicht klickbar sein */
.cherry-wordcloud-scene .cherry-wordcloud-chip {
  pointer-events: none !important;
  cursor: default !important;
}

/* 3D-Elemente */
.cherry-wordcloud-wrapitem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--cherry-wordcloud-tx)), calc(-50% + var(--cherry-wordcloud-ty)));
  transform-style: preserve-3d;
  will-change: transform;
}
.cherry-wordcloud-item,
.cherry-wordcloud-counter {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Chips */
.cherry-wordcloud-chip {
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400; /* Regular */

  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
  letter-spacing: .01em;
  background: rgba(255, 255, 255, 0);
  border: 0px solid rgba(255,255,255,0.7);
  color: #ffffff;
  user-select: none;
  cursor: pointer;
  transition: transform .4s ease, filter .4s ease, opacity .4s ease;
  will-change: transform, filter, opacity;
}

/* Wordcloud: zunächst unsichtbar, dann weich einblenden */
.cherry-wordcloud-stage.wc-hidden {
  opacity: 0;
  pointer-events: none;
}
.cherry-wordcloud-stage.wc-visible {
  opacity: 1;
  transition: opacity .6s ease; /* Einblenddauer anpassen */
}

/* Breakpoints – ident zu deinen ursprünglichen Defaults */

@media screen and (min-width: 768px) {
  .cherry-wordcloud-stage {
    --wc-theme-radius: 280;
    --wc-theme-track-spacing: 200;
    --wc-theme-dur: 25;
    --wc-theme-font-scale: 1.1;

    --wc-theme-max-width: 100%;
    --wc-theme-min-height: 35vh;
    --wc-theme-max-height: 45vh;
    --wc-theme-aspect-ratio: 3 / 2;
    --wc-theme-padding: clamp(12px, 7vmin, 40px);
  }
}

@media screen and (min-width: 1024px) {
  .cherry-wordcloud-stage {
    --wc-theme-radius: 320;
    --wc-theme-track-spacing: 240;
    --wc-theme-dur: 25;
    --wc-theme-font-scale: 1.3;

    --wc-theme-max-width: 100%;
    --wc-theme-min-height: 38vh;
    --wc-theme-max-height: 48vh;
    --wc-theme-aspect-ratio: 3 / 2;
    --wc-theme-padding: clamp(12px, 7vmin, 40px);
  }
}

@media screen and (min-width: 1400px) {
  .cherry-wordcloud-stage {
    --wc-theme-radius: 360;
    --wc-theme-track-spacing: 280;
    --wc-theme-dur: 25;
    --wc-theme-font-scale: 1.6;

    --wc-theme-max-width: 100%;
    --wc-theme-min-height: 40vh;
    --wc-theme-max-height: 50vh;
    --wc-theme-aspect-ratio: 3 / 1;
    --wc-theme-padding: clamp(12px, 7vmin, 40px);
  }
}