/***************************** Icon Box Style  ****************************/
.congradi-2 .elementor-widget-icon-box .elementor-icon-box-icon {
    margin-top: 5px;
}

/***************************** Gradiant-Container  ****************************/
.congradi-1 {
    /* Sehr helles Rosa (#ffebee) und sehr helles Orange (#fff8e1) */
    background: linear-gradient(45deg, #ffebee, #fff8e1, #ffffff);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}

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

.congradi-2 {
        background: linear-gradient(244deg, #fff6e3 0%, #f0f0f0 73%, #fdfffc 100%);
}

/***************************** Beamcard ****************************/

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.beam-card {
  border-radius: 14px !important;
  position: relative;
  background:
    linear-gradient(#fff, #f7f7f7) padding-box,
    linear-gradient(to bottom right,
      rgba(203,169,90,0),
      rgba(203,169,90,.7),
      rgba(203,169,90,0)
    ) border-box !important;
  border: 1.5px solid transparent !important;
  transition: background 600ms ease, box-shadow 600ms ease;
  overflow: visible !important; /* wichtig – sonst wird ::after abgeschnitten */
}

.beam-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    transparent 340deg,
    rgba(232,201,122,.9) 350deg,
    white 355deg,
    rgba(232,201,122,.9) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  animation: beam-spin 2.5s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 0;
  pointer-events: none;
}

.beam-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    transparent 340deg,
    rgba(203,169,90,.3) 350deg,
    rgba(232,201,122,.5) 355deg,
    rgba(203,169,90,.3) 360deg
  );
  filter: blur(8px);
  animation: beam-spin 2.5s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: -1;
  pointer-events: none;
}

.beam-card:hover::before,
.beam-card:hover::after {
  animation-play-state: running;
  opacity: 1;
}

@keyframes beam-spin {
  to { --angle: 360deg; }
}

/***************************** Menu Styles ****************************/

/* Unterstreichung beim Hover und aktiven Zustand für Elementor Navigationsmenü Links */
.elementor-nav-menu--main .elementor-item {
    position: relative;
    text-decoration: none;
}

.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
    transform: scaleX(0.8);
}

/***************************** Animated Button Icon ****************************/
.animated-icon-btn .elementor-button-icon {
  display: inline-block;
  transform: translateX(0px);
  will-change: transform;
  animation: slide-smooth-back 0.4s ease-in-out backwards; /* Standardmäßig keine Bewegung */
}

.animated-icon-btn .elementor-button:hover .elementor-button-icon {
  animation: slide-smooth-forward 0.4s ease-in-out forwards; /* Bewegung nach rechts beim Hover */
}

@keyframes slide-smooth-forward {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(10px);
  }
}

@keyframes slide-smooth-back {
  0% {
    transform: translateX(10px); /* Startposition für die Rückwärtsbewegung */
  }
  100% {
    transform: translateX(0px); /* Endposition: Ausgangsposition */
  }
}