btw: after you have seen the test-page i delete your images!
it’s just to show you how it could look like.

well if you put in quick css this – you will see that it could work this manner you started.
But : there’s too much else wrong. Have a look at your navigation and the logo behaviour on small screens. Mobile devices so to speak.
I think one should first dedicate oneself to this topic. And then go to Borderstyling.

#av_section_2.test3 {
 position:relative !important;
 z-index:1 !important;
 background:transparent url(https://bright.itsomimedia.nl/wp-content/uploads/Rand_Bright_lichtgrijs.png) !important;
 height: 340px;
 margin: -300px auto 0;
 background-size: 100% 100% !important;
 background-repeat: no-repeat !important;
 background-clip:padding-box
}

https://kriesi.at/documentation/enfold/child-theme/

On default there is no child-theme present. But you can download a predefined one from link above.
A lot of those snippets here on board only work good with a child-theme.
You can update the parent theme without the risk of lost the made adjustments to the theme.

If you are not familiar with child-theme – read that carefully – and read my tutorial on that linked page above carefully too.

for the menu links : maybe you set for all links the content of the menu as alt attribute
this comes as the code above to child-theme functions.php:

function set_menu_text_as_alt(){
?>
<script>
(function($){
		$('#avia-menu .menu-item a').each(function(){
			var menuName = $(this).find('>.avia-menu-text').text();
			$(this).attr('alt', menuName);
		});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_menu_text_as_alt');

try first without $(document).ready(function() this must work too

i have to see your site to give advice

and what kind of feature you like to have?

Sorry – i think this will work – but with my method you got that little message posibility in the gradient section and –
you can have all gradients (even images) in that second color-section without making allways another png file for it.

create your layout in this way:
you need for it two color-sections
the first color-section with your image and the content – i give a custom class to it:
background-with-content
the following second color-section – this is only for the gradient ( and maybe one short info text) with custom class:
background-with-message

the image and the gradient could be done in the alb element itself as you know allready.

put this to your quick css:

.avia-section.background-with-content {
  border-bottom-right-radius: 200px;
  z-index: 5;
  position: relative;
}

.avia-section.background-with-message {
  position: relative;
  margin-top: -200px;
  z-index: 0;
}

.avia-section.background-with-message .container {
    height: 300px !important
}

.avia-section.background-with-message .container .content {
    vertical-align: bottom;
    padding-bottom: 20px !important
}

looks this way: https://webers-testseite.de/rounded-background-gradient/

Edit: on very small screens you had to make a rule for that message in the gradient container.
padding-bottom or font-size etc.

if you drag and drop that ALB ( Advanced Layout Builder ) Element ( Columns ) to your layout – the default setting of border is set to : none
click to enlarge:

If there was a setting it will end up in an inline css:
( so open one column set on that page and navigate to that tab called: “Border” and see if there are entries )

and you got this rule:

.main_menu {
    right: 20%;
}

so i guess thats why you believe that content is too small.
Your content width is at 1310px

f.e. if there are media queries – often the closing bracket is missing or there are additional ones:

you have :

.responsive .logo a {
 vertical-align:top
} /*** one curly bracket too much ***/
}

but the opened media query is closed before :

@media only screen and (min-width:990px) {
 .mobile_only {
  display:none !important
 }
}

etc. pp

same as here: https://kriesi.at/support/topic/grid-row-boxes-dont-line-up/

?

by the way a horrible example – not responsive at all

by the way – if this is the mega menu for your blog – each item got his own featured image ?

you can have infront of each mega-menu li your featured image
see here on a test page: https://webers-testseite.de/lepper/
look to “Was wir bieten” Mega Menu

it is a code from ismael that works perfectly – see here:
https://kriesi.at/support/topic/on-mega-menu-show-in-front-of-list-points-the-featured-image/#post-688912

after you only have to style these little images ! : .main_menu .avia_mega_div .attachment-thumbnail.size-thumbnail.wp-post-image
on that line : if ($args->menu->name != 'Main Menu') return $sorted_menu_objects; you must enter the name of your main menu

This method is based on the flex-box modell and the “stickyness” is allways in relation to its parent container.
See testpage here: https://webers-testseite.de/sticky-elements/
So see first if this fits your needs – otherwise you don’t need to read further.

well it will be better to see any live page to give better advice – but here we go.
a good method will be position sticky ( only Opera mini and IE11 do not support position: sticky )

it is important that on this method the default values for these elements are changed to overflow : visible:

.responsive body#top {
    overflow-x: visible;
}

#wrap_all {
    overflow: visible;
}

if you only have that on some pages it might be usefull to limit it to only these pages by f.e.:

.responsive body#top.page-id-123 {
    overflow-x: visible;
}

.page-id-123 #wrap_all {
    overflow: visible;
}

the sticky elements ( columns f.e.) stick if they have a given distance to top – and will scroll when the parent container scrolls out of the scene.
f.e. you can have on that column a menu etc.

A useful setup would be to have a color-section as surrounding container – give to that color-section a custom class:
sticky-parent
Place your columns to this color-section – the columns you like to be sticky give them a custom class:
sticky-element

on responsive case you don’t need that – because columns then stand among each other. – so we can place the css in a media query:

@media only screen and (min-width: 767px){
	.sticky-parent .entry-content-wrapper {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	}

	.sticky-parent .entry-content-wrapper:before,
	.sticky-parent .entry-content-wrapper:after {
		display:none
	}

	.sticky-element {
	    position: -webkit-sticky !important;
	    position: sticky !important;
	    top: 140px;
	    align-self: flex-start;
	    min-width: 30%;
	}
}

you can play with top position and min-width here – because even if the columns are 1/3 the flex-model rules here the width !

Warum fügst du es nicht als Checkbox in dein Kontakt Element ein? – und setzt es dann auf Pflichtfeld (ohne Preselection)
oder habe ich dein Anliegen falsch verstanden? Was willst du damit erreichen? Wenn die Checkbox Pflicht ist, ist doch der Vorschrift genüge getan. oder?

Da hast du dann gleich alles was nötig ist . In das Form Element Label kannst du nämlich html code einsetzen:

Ich habe die <a href="/datenschutzerklaerung/">Datenschutzerklärung</a> gelesen und bin mit der entsprechenden Verarbeitung meiner Daten einverstanden.