try ( now just for that post : vuur5 to not have influence from other settings )

next question: why don’t you use the enfold options on adding video to color-section:

see with css code:
https://webers-testseite.de/vuur/

i can change that for you – but you should think about it if is a good handling of the site if 2/3 of the screen height on mobile devices are #head – and content (#main) only 1/3.

where is that page ( name is enough for me )

_________________

ok – your widget content gets bigger – than new settings are needed:

again search for the entries in quick css and change those values:

/* declarations inside these comments had to be changed  */
/* and missing declarations had to be added to the existing ruleset */

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
    /* padding-top: 420px !important; */
    padding-top: 550px !important;
  }
}

@media only screen and (max-width: 989px) {
  #header .inner-container {
    /* grid-template-columns: 3fr 1fr; */
    /* grid-template-rows: 50px 1fr; */
    /* padding: 20px 0; */
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 160px 1fr;
    padding: 0;
  }
  .responsive.html_header_top #top #main {
    /* padding-top: 400px !important;  change to new value*/
    padding-top: 550px !important;
  }
  #header .inner-container {
    /* margin: 15px 0 0;  so just erase that rule*/
  }

  #header .inner-container .logo a, #header .inner-container .logo img {
    height: 300px !important;
    max-height: 300px !important;
    /* width: auto; */
    width: 300px !important;
    max-width: unset;
  }
}

ps – is that a wise decision to have such a big header area for mobile devices?

i understand – but what about showing me the demo-page what was the base of your page.
f.e.: https://kriesi.at/themes/enfold-law/practice-areas/#av_section_2 – and my question if it is a background-image or as an image element?

this is inside the zip file downloaded from Google:

so you see the variable fonts – and inside the static folder the other fonts.
Enfold can handle both – but you had to upload them separately. So unzip that file – the varible fonts put in a Folder f.e. Petrona-variable and pull out that zip file the static folder and rename it to Petrona
zip these two folders ( on Mac do not include Mac Meta data ). Now these zip files are ready to upload. Make a decision what you like to use.

For testing purpose – if you only need 100,400,700 download: Link
and here is the variable font: Link

First test only the static fonts. Normal users rarely know how to use a variable font ;)

Enfold font manager:

Choose your font then in General Styling – Fonts – at the end of the list there are the uploaded fonts

the above problem may have nothing to do with this, but you are aware that the downloaded Petrona.zip contains both static and variable fonts.

Google Petrona is one such variable font. The zip file you download from Google contains the variable font files and the static font files in a subfolder. Enfold also supports the use of variable fonts – but you need to upload them separately.

Now you has to decide if you like to use both – and the static font files as fallback solution ( that needs some additional conditional querries ) – or to use one kind of font file.

The static fonts contain a large number of styles (from 100 to 900 – regular and italic); you may want to make a selection here.

Ja, mit deiner Schrift hat die Umstellung jetzt funktioniert.

behalte deine als Lizenznachweis für Dich.

PS : du hast jetzt die container weite auf maximal 1000px gestellt ?
Na das hat sich dann ja richtig gelohnt, für die 10px unterschied das Menü zu stylen ;) bis (990px ) bis der Hamburger greift

___________

PS : you have now set the container width to a maximum of 1000px ?
Well, that was really worth it to style the menu for the 10px difference up to (990px ) until the hamburger takes over ;)

if you enlarge the logo (as mentioned on the other post ) you had to correct the padding-top of #main ( for that screen-width)

#top .header_color .av-hamburger-inner, 
#top .header_color .av-hamburger-inner::before, 
#top .header_color .av-hamburger-inner::after {
  background-color: #000;
}

so change the css rules for that too:

@media only screen and (max-width: 989px) {
  .responsive.html_header_top #top #main {
    /* padding-top: 320px !important; */
    padding-top: 400px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
    /* padding-top: 320px !important; */
    padding-top: 420px !important;
  }
}

Zunächst sieh es dir jetzt nach meinen Veränderungen an den Headerbereich betreffend.

Aber du hebelst ja selbst mittels der “Engführung” des menu-items 96 die Gleichmäßigkeit aus:

#menu-item-96 a .avia-menu-text {
  line-height: 18px;
}

die Äquidistanz ist ja da wenn du die Einstellungen zurücknimmst.

man könnte es erzwingen … indem du die fehlenden 9px / jetzt 5px ( der line-height – jetzt 20px ) oben und unten dazu gibst:

#menu-item-96 a .avia-menu-text {
  white-space: normal;
  word-wrap: break-word;
  display: block;
  width: 150px;
  text-align: right;
  line-height: 20px;
  padding: 5px 0;
}

Also allgemein line-height 30px – hier dann diesem Menüpunkt die 20px + 2x5px open /unten

PS: ich habe es mal reingesetzt. Dann siehst Du wie es sich verhält.

Du könntest nun durch Ändern dieser Regelsatzes noch nach Bedarf die Logo Größe ändern:
(jeweils dann auch für die media-queries anpassen – momentan ist es auf 200px eingestellt)

#header .inner-container .logo a, #header .inner-container .logo img {
    height: 240px !important;
    max-height: 240px !important;
    width: auto;
  }

durch Ändern der Einstellung auf start werden die grid-items ( widget, logo, nav) dann oben bündig angeordnet:
(momentan steht align-self auf center – bedeutet die vertikale Zentrierung)

#header .inner-container > * {
  align-self: start;
  width: auto !important;
  position: relative;
}

as a participant i do not see your private content messages – but do you use WPML?
WPML does handle your language Settings even for those enfold options.
you got on top your lang flags :

so if you like to have the same look – you had to synchronise these settings for each language.
read here https://kriesi.at/support/topic/implementing-the-same-theme-setting-to-all-languages-using-enfoldwpml/

My advice: first style the page completely in your native language, then go via the theme settings. ( see link above)

ich habe dir jetzt zwei wege aufgezeigt.
zum Einen könntest du mit dem bisher erreichten ja den Code von Link mal einsetzen.

Dann sieht die seite so aus:

zum Anderen – und ja klar wäre das ein Neuansatz – die Lösung über das Grid Layout.
Dazu wäre dann nötig den bisherigen Code zu entfernen, und den neuen Ansatz auszuprobieren.

you can use on $sub html tags . f.e.:

function kriesi_logo_addition($sub)
{
  $sub .= "<span class='logo-title'>";
  $sub .= get_bloginfo( 'name', 'display' );
  $sub .= "</span>";
  $sub .= "<span class='logo-title logo-subtitle'>";
  $sub .= get_bloginfo( 'description', 'display' );
  $sub .= "</span>";
  return $sub;
}
add_filter('avf_logo_subtext', 'kriesi_logo_addition');

and if you can insert classes that way – you can have here alt and title too.

btw:

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).