/* Cube Host – hält das Seitenverhältnis, verhindert Stretching */
#cube3-host {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* Quadrat; bei Bedarf z.B. 16/9 */
  overflow: hidden;
  border-radius: inherit;
}

/* Canvas füllt die Fläche exakt */
#cube3-host > canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* falls du statt <canvas> ein dynamisch erzeugtes Canvas hast */
#cube3-host { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.75rem; }
#cube3-host > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Sticky Cards Stabilisierung --- */
[data-stack-card]{
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}

/* Der farbige Glow-Layer soll nie Events fangen und eine eigene GPU-Ebene haben.
   (Falls du ihn global per Selektor nicht treffen willst, reicht der HTML-Klassen-Add aus Schritt 1C.) */
.card-glow-fix{
  pointer-events: none;
  z-index: -1;
  will-change: filter, transform;
  transform: translateZ(0);
}

/* Cube-Host: Anti-Stretch + stabile Ebene */
#cube3-host{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem; /* nur falls kein Tailwind rounding gesetzt ist */
}
#cube3-host > canvas{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /* If an ancestor applies a restrictive max-width, prefer the canvas to scale to the host width. */
  max-width: none !important;
}