/******************** 
***Button Verlauf Hover effekt 
********************/ 


.fusion-button.gradient-button {
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  z-index: 1;
  transition: color 0.3s ease;
}

.fusion-button.gradient-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    #E3051B,
    #004b88,
    #00877F,
    #E3051B
  );
  background-size: 220% 220%;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: -1;
}

.fusion-button.gradient-button:hover::before {
  opacity: 1;
  animation: itas-button-gradient 8s ease-in-out infinite;
}

.fusion-button.gradient-button .fusion-button-text {
  position: relative;
  z-index: 2;
  color: #fff !important;
}

@keyframes itas-button-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/***********
*** MENÜ 
***********/

/* Basis */
.awb-menu #menu-main > li > a .menu-text {
    transition:
    color 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mini Scale Hover */
.awb-menu #menu-main > li > a:hover .menu-text {
  transform: scale(1.04);
}


/* 1. Menüpunkt: Blau */
.awb-menu #menu-main > li:nth-child(1) > a:hover .menu-text {

  color: #004b88 !important;
}

/* 2. Menüpunkt: Türkis */
.awb-menu #menu-main > li:nth-child(2) > a:hover .menu-text {
  color: #00877F !important;
}

/* 3. Menüpunkt: Rot */
.awb-menu #menu-main > li:nth-child(3) > a:hover .menu-text {
    color: #E3051B !important;
}

/* Ab 4. Menüpunkt: Verlauf */
.awb-menu #menu-main > li:nth-child(n+4) > a:hover .menu-text {
  background: linear-gradient(
    90deg,
    #E3051B,
    #004b88,
    #00877F
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Footer Menü Gradient Hover */
.fusion-footer #menu-informationen-menue > li > a .menu-text,
.fusion-footer #menu-rechtliches > li > a .menu-text {
  display: inline-block;
  transition:
    color 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fusion-footer #menu-informationen-menue > li > a:hover .menu-text,
.fusion-footer #menu-rechtliches > li > a:hover .menu-text {
  transform: scale(1.02);
  background: linear-gradient(
    90deg,
    #E3051B,
    #004b88,
    #00877F
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Icon im Informationen-Menü ebenfalls einfärben */
.fusion-footer #menu-informationen-menue > li > a .awb-menu__i,
.fusion-footer #menu-informationen-menue > li > a .awb-menu__i i {
  transition: color 0.35s ease;
}

.fusion-footer #menu-informationen-menue > li > a:hover .awb-menu__i,
.fusion-footer #menu-informationen-menue > li > a:hover .awb-menu__i i {
  color: #E3051B !important;
}


/******************** 
*** Check Icons permanenter, sichtbarer Verlauf
********************/

/* Avada-Kreisfarbe deaktivieren */
.fusion-checklist.gradient-check-icons {
  --awb-circlecolor: transparent !important;
}

/* Der runde Icon-Hintergrund */
.fusion-checklist.gradient-check-icons .icon-wrapper.circle-yes {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Rotierender Verlauf */
.fusion-checklist.gradient-check-icons .icon-wrapper.circle-yes::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #E3051B,
    #004b88,
    #00877F,
    #E3051B
  );
  animation: itas-check-icon-rotate 9s linear infinite;
  z-index: 0;
}

/* Optional: leichte dunkle Überlagerung, damit der weiße Haken gut sichtbar bleibt */
.fusion-checklist.gradient-check-icons .icon-wrapper.circle-yes::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.12);
  z-index: 1;
}

/* Das Check-Zeichen selbst */
.fusion-checklist.gradient-check-icons .icon-wrapper.circle-yes .fusion-li-icon {
  position: relative !important;
  z-index: 2;
  background: transparent !important;
  color: #ffffff !important;
}

/* Falls Avada das Icon über ::before ausgibt */
.fusion-checklist.gradient-check-icons .icon-wrapper.circle-yes .fusion-li-icon::before {
  color: #ffffff !important;
}

/* Animation */
@keyframes itas-check-icon-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}