.bns-on-hover:hover.bns-on-hover-to-border-white,
.bns-on-hover:hover .bns-on-hover-to-border-white .elementor-widget-container {
  border-color: #ffffff !important;
}
.bns-on-hover:hover.bns-on-hover-to-border-black,
.bns-on-hover:hover .bns-on-hover-to-border-black .elementor-widget-container {
  border-color: #000000 !important;
}
.bns-on-hover:hover.bns-on-hover-to-border-primary,
.bns-on-hover:hover .bns-on-hover-to-border-primary .elementor-widget-container {
  border-color: var(--e-global-color-primary) !important;
}
.bns-on-hover:hover.bns-on-hover-to-border-secondary,
.bns-on-hover:hover .bns-on-hover-to-border-secondary .elementor-widget-container {
  border-color: var(--e-global-color-secondary) !important;
}
.bns-on-hover:hover.bns-on-hover-to-border-accent,
.bns-on-hover:hover .bns-on-hover-to-border-accent .elementor-widget-container {
  border-color: var(--e-global-color-accent) !important;
}

.bns-on-hover:hover .bns-on-hover-to-bg-white .elementor-widget-container {
  background-color: #ffffff !important;
}
.bns-on-hover:hover .bns-on-hover-to-bg-black .elementor-widget-container {
  background-color: #000000 !important;
}
.bns-on-hover:hover .bns-on-hover-to-bg-primary .elementor-widget-container {
  background-color: var(--e-global-color-primary) !important;
}
.bns-on-hover:hover .bns-on-hover-to-bg-secondary .elementor-widget-container {
  background-color: var(--e-global-color-secondary) !important;
}
.bns-on-hover:hover .bns-on-hover-to-bg-accent .elementor-widget-container {
  background-color: var(--e-global-color-accent) !important;
}

.bns-on-hover:hover .bns-on-hover-to-white-icon-box-icon .elementor-icon-box-icon *,
.bns-on-hover:hover .bns-on-hover-to-white-icon-box-title .elementor-icon-box-title *,
.bns-on-hover:hover .bns-on-hover-to-white-icon-box-description .elementor-icon-box-description,
.bns-on-hover:hover .bns-on-hover-to-white * {
  color: #ffffff !important;
}
.bns-on-hover:hover .bns-on-hover-to-black-icon-box-icon .elementor-icon-box-icon *,
.bns-on-hover:hover .bns-on-hover-to-black-icon-box-title .elementor-icon-box-title *,
.bns-on-hover:hover .bns-on-hover-to-black-icon-box-description .elementor-icon-box-description,
.bns-on-hover:hover .bns-on-hover-to-black * {
  color: #000000 !important;
}
.bns-on-hover:hover .bns-on-hover-to-primary-icon-box-icon .elementor-icon-box-icon *,
.bns-on-hover:hover .bns-on-hover-to-primary-icon-box-title .elementor-icon-box-title *,
.bns-on-hover:hover .bns-on-hover-to-primary-icon-box-description .elementor-icon-box-description,
.bns-on-hover:hover .bns-on-hover-to-primary * {
  color: var(--e-global-color-primary) !important;
}
.bns-on-hover:hover .bns-on-hover-to-secondary-icon-box-icon .elementor-icon-box-icon *,
.bns-on-hover:hover .bns-on-hover-to-secondary-icon-box-title .elementor-icon-box-title *,
.bns-on-hover:hover .bns-on-hover-to-secondary-icon-box-description .elementor-icon-box-description,
.bns-on-hover:hover .bns-on-hover-to-secondary * {
  color: var(--e-global-color-secondary) !important;
}
.bns-on-hover:hover .bns-on-hover-to-accent-icon-box-icon .elementor-icon-box-icon *,
.bns-on-hover:hover .bns-on-hover-to-accent-icon-box-title .elementor-icon-box-title *,
.bns-on-hover:hover .bns-on-hover-to-accent-icon-box-description .elementor-icon-box-description,
.bns-on-hover:hover .bns-on-hover-to-accent * {
  color: var(--e-global-color-accent) !important;
}

.bns-on-hover:hover .bns-on-hover-to-white-icon-box-icon-background .elementor-icon-box-icon .elementor-icon {
  background-color: #ffffff !important;
}
.bns-on-hover:hover .bns-on-hover-to-accent-icon-box-icon-background .elementor-icon-box-icon .elementor-icon {
  background-color: var(--e-global-color-accent) !important;
}

.bns-on-hover-effect {
  position: relative;
  overflow: hidden; /* Verhindert Überlaufen der Animation */
  z-index: 0;
}

.bns-on-hover-effect::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0;
  background-color: var(--e-global-color-accent);

  /* Animation & Ursprung */
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  -ms-transform-origin: bottom;
  -o-transform-origin: bottom;
  transform-origin: bottom;

  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform: scaleY(0);

  /* Transition */
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;

  will-change: transform, opacity;
  backface-visibility: hidden;
}

.bns-on-hover-effect:hover::after {
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
  z-index: -1;
}