You can sketch it out – so we can better visualise what you want to achieve.

i’m participant as you – so no private content field for me to read. sorry – you had to wait til mods are here.

your sketch on the bottom is the non responsive case :
left a widget area – then logo – then main menu on the right ? and then under all that the page content?

https://kriesi.at/documentation/enfold/example-of-widget-left-logo-center-menu-right/

setting the nav to:

#top #header .av-main-nav {
  display: flex;
  flex-flow: column nowrap;
}

#top #header_main > .container, 
#top #header_main > .container .main_menu .av-main-nav > li > a, 
#top #header_main #menu-item-shop .cart_dropdown_link {
  height: 30px;
  line-height: 30px;
}

will put your list-items under each other.

BUT: Can you really recommend something like this?

PS: deine zum Upload vorbereiteten Fonts sollten vor allem auch woff2 beinhalten. Moderne Browser können die alle verwerten, und die sind auf Grund der Brotli Kompression viel schneller geladen als ttf.
Daher eventuell schmeiss auch deine Open-Sans mal raus und lade diese hier hoch.: Open_Sans.zip

hier ist der Vergleich woff2 zu ttf (Alles jeweils gut 1/3 kleiner)

all links above go to code that has old

$(window).load(function() {

keep in mind that jQuery 3.x it has to be:

$(window).on('load', function(){

you can find all demos on GitHub Library: Link

download the zip file you need. Extract the xml file of it and look for the needed enfold shortcode of the wanted page — easiest way: search for the page ID as: post_id>206 or finding the home page on that demo search for: CDATA[home]

copy the needed enfold shortcodes from :

<content:encoded><![CDATA[  
… here is the avia shortcode inside
]]></content:encoded>

this copied shortcodes you can enter on a new page inserting it to the debug mode input field (activate the debug mode on : Layout Builder – Debug Mode (Backend Only))
save that new page – now you have copied all the layout of the wanted page.

You had to edit now that page elements to enter your image/media links inside that code.

thanks for the links – if you realy like to have it perfect – the aspect ratio is 960:414 = 2.319/1 so your 2.35/1 is not correct. ;)

i see this in your DOM:

no child just enfold.

next: see if i switch on the usage of google web fonts via your privacy settings:
https://webers-testseite.de/jeroch.mp4

on your @font-face rules a lot of open-sans and one Din font:

activation of uploaded Fonts : the list of uploaded fonts is at the end of that enfold list:

something went wrong with your uploading ( on that child-theme with dinpro-light ) –
and yes i have seen that on your video the child was activate ( but now the theme itself is in use)

and you are shure, that these black bars are not integrated to your video?

First of all – your business location is Germany – so you had to be GDPR (DSGVO) compliant.
For that reason – do you have any entrance inside your theme to hamper google font support of the theme. F.e. via a snippet plugin?
like:

function my_output_google_webfonts_script( $activate ){
  return false;
}
add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );

OR

function enfold_customization_switch_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}
add_action( 'init', 'enfold_customization_switch_fonts' );

you only uploaded open-sans and din-alternate-cdnfonts

Next question: on your video i see that you are using a child-theme – but on your live site i do not see that you are using it?

ON your Privacy setting : if i accept using Google Web fonts i see:

my recommendation on GDPR compliance : use selfhosted fonts – upload them via font-manager as you did with open-sans.
Then you do not need to mention the google webfont usage hint on privacy.

footer, buttons und andere Elemente sind über diese Grundeinstellungen ( Allgemeines Styling ) gesetzt, aber diese Trenner werden wohl im Element (grid-row und dann die Zellen) gesetzt sein. Auch einige Sections HIntergrundfarben werden wohl im Element festgelegt sein.

Die Textlichen Hervorhebungen sind über :

#top .all_colors u, #top .all_colors span[style*="underline;"] {
  color: #719430;
  line-height: 1.4em;
  font-family: 'caveat',Helvetica,Arial,sans-serif;
  text-decoration: none !important;
  display: inline-block;
}

gesetzt.

Wenn du eine Liste hast welche Farbe du gegen eine andere austauschen willst, könntest du es auch über die Datenbank machen.
Tools wie https://de.wordpress.org/plugins/better-search-replace/ könnten da helfen.

Im Grunde betrifft es wohl nur 3 Tabellen (wobei ich in dem Fall Groß/Kleinschreibung misachten würde):

on https://kriesi.at/themes/enfold-2017/elements/magazine/ you want to preserve the bigger image post and have on the smaller images a two column view?

to have:

you can have this by css only – but you had to break earlier to responsive case to have enough space for showing the articles with smaller images:

#top .av-magazine-sideshow:before,
#top .av-magazine-sideshow:after {
  display: none;
}

#top .av-magazine-sideshow {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top .av-magazine-sideshow .av-magazine-entry {
  flex: 0 1 48%;
  width: unset;
}

I can reproduce this by frequently narrowing and widening the browser window on smaller screen widths. This increases the calculated height of the column each time.

i think the trouble comes from setting the column height not color-section height of those headings to 100%.

maybe it is best to use here an absolute min-height option: f.e.: 250px

I don’t quite understand the intention behind setting the height of a column. The height of the column depends on the content.
i would set this min-height option to color-section only.

#top #header_meta .sub_menu {
  padding-top: 10px;
}

this will end in a same baseline – if you like to have it more centered then use perhaps 9px