:root {
/*--grad: linear-gradient(
    to left,

      #EA4335,
      #FBBC05,
      #34A853,
      #425df4,
      #f442b0
  );*/

--grad: linear-gradient(
    to left,

      #fb9005,
      #ea356e,
      #f35acd,
      #eb3d97,
      #e2405e,
      #fb9005
  );

--glow-worm: linear-gradient(
    to left,
      #FFFFFF,
      #ffe180,
      #FFFFFF,
      #ffffff,
      #FFFFFF,
      #80ff91,
      #FFFFFF,
      #ffffff,
      #FFFFFF,
      #808dff,
      #FFFFFF,
      #ffffff,
      #FFFFFF,
      #ff8080,
      #FFFFFF,
      #ffffff,
      #FFFFFF

  );
}

/*Glow Animation*/
.glow-wrapper {
  position: relative;
  display: inline-block; /* Or width: 100% depending on your layout */
  border-radius: 0;    /* Matches your input corners */
  transition-duration: 2s;
  
}

.glow-wrapper::after {
  position: absolute;
  content: "";
  top: 0; 
  left: 0;
  right: 0; 
  bottom: 0;
  z-index: -1;
  margin: 2px; /*pulls the glow slightly outside*/
  filter: blur(95px);
  background: var(--grad);
  background-size: 800% 800%;
  border-radius: inherit;
  
  
  /* the animation and transition */
  animation: animateGlow 120.25s linear infinite;
  
  /*ease in*/
  opacity: 0;                    /* Start invisible */
  transition-property: opacity;  /* Only animate the fade */
  transition-duration: 0.3s;     /* This makes it a slow/soft ease-in */
  transition-timing-function: ease-in-out;
}

.glow-wrapper:focus-within::after {
  opacity: 1; /* Fades in smoothly */
}

@keyframes animateGlow {
  0% { background-position: 800% 50%; }
  100% { background-position: 0% 50%; }
}


/*Glow Box Animation*/
.glow-box {
  position: relative;
  display: inline-block; /* oder block / flex je nach Bedarf */
  border-radius: inherit; /* passt sich dem Element an */
}

/* Glow-Layer */
.glow-box::after {
  content: "";
  position: absolute;
  inset: 10px -120px -60px -120px;               /* Glow leicht außerhalb */
  z-index: -1;

  background: var(--grad);
  background-size: 800% 800%;
  filter: blur(95px);

  border-radius: inherit;

  /* immer sichtbar */
  opacity: 0.34;

  /* Animation */
  animation: animateGlowBox 120s linear infinite;
}

/* Animation */
@keyframes animateGlowBox {
  0%   { background-position: 800% 50%; }
  100% { background-position:   0% 50%; }
}