.service-headline.sj-reveal{
  position: relative;
  display: inline-block;
  color: #2b2b2b; /* Basetext bleibt immer dunkel */
}

/* Gradient-Layer (breitet sich als Ellipse aus) */
.service-headline.sj-reveal::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;

  background: linear-gradient(to right, #FF5B23, #7373CD);
  background-size: 120%;
  background-position: center;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  pointer-events: none;

  clip-path: ellipse(0% 0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 1.6s cubic-bezier(.22,.61,.36,1), background-size 1.8s ease;
}

.service-headline.sj-reveal:hover::after{
  clip-path: ellipse(140% 220% at var(--mx, 50%) var(--my, 50%));
  background-size: 100%;
}

/* “Hole”: dunkler Text-Layer, nur in kleinem Kreis sichtbar (liegt ÜBER dem Gradient) */
.service-headline.sj-reveal::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;

  color: #2b2b2b; /* exakt Basetext-Farbe */
  pointer-events: none;

  /* kleiner Kreis am Cursor -> macht dort den Text wieder dunkel */
  clip-path: circle(var(--holeSize, 14px) at var(--mx, 50%) var(--my, 50%));
  opacity: 0;
  transition: opacity .15s ease;
}

.service-headline.sj-reveal:hover::before{
  opacity: 1;
}