Custom header height distorts logo

you set the height to 150px and !important
twice on line 134 and 145 and a few other settings are not set very well.

first get rid of the whole setting: height, max-height, width on both settings.
then we have a look what to do with the other parts.

look to your header widget settings and replace or add :

#header .widget_text {
  top: 50%;
  padding: 0 !important;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

where does these “advanced_menu_toggle” and “advanced_menu_hide” come from? do you need them? they have a 30px height in the header without content!

such a font logo just demands to be represented by an svg

on a shrinking header they overlap after scrolling.
But now you set the header to non-shrinking. ( ok that problem is solved by this )

shrink the browser window ( make it narrower ) or look to your page on a mobile device:
the left hamburger overlapping slider is the active one – the right one is without function ( twice hamburgers )

Ipad view: ( all tablets ):
overlapping navigation etc ( both navigation list points are not clickable anymore by the overlapping header widget area )

i wouldn’t do that with header widget area. these are links that seems to be part of a navigation but only with icons in front and with two line labels.
So why not use the menu and to have those menu points with a custom-class. Your normal menu floats left – these two menu-points float right. Thats all.
the icons can be placed in pseudo-containers – and the two line label can be inserted by a label with a span inside – f.e.:
Anfrage<span class="menu-break">stellen</span>

the rest is quick css – and what is very nice – the shrinking is included – and the links are in hamburger too from the beginning.
see: https://webers-testseite.de/weber/

sollte dich das interessieren sag einfach Bescheid. Dann versuche ich es hier zu beschreiben.

That’s o.k. ; but some mods here don’t work daily with customer requests in real wordpress life. I just know that all very well; in the time where I was intensively occupied with jQuery and further education I tried to realize everything via scripts.
Since one has already times a few standard answers, which are not always the optimal way.
You have to have understanding for that, because with the abundance of questions here they hardly have more time than 5-10min to find an answer.

But if it is o.k. here now for the other participants I answer now in German. If someone needs the instructions in English please write here.

Nun : das hier in das Quick CSS einfügen.

.anfrage a:before {
  content: "\e805"; 
}
.telefon a:before {
  content: "\e83c"; 
}

@media only screen and (min-width: 990px) {
  #header_main_alternate {
    border-top: none;
  }

  span.menu-break {
    display: block;
    line-height: 60px;
    bottom: 35px;
    position: relative;
  }

  .anfrage, .telefon {
    text-align:left;
    float: right !important;
    top: -15px;
    margin-left: 60px
  }

  .anfrage a:hover:before , 
  .telefon a:hover:before {
    background-color : #aaa !important;
  }

  .anfrage a:hover .avia-menu-fx , 
  .telefon a:hover .avia-menu-fx {
    display : none !important;
  }

  .anfrage a:before, .telefon a:before {
    display: table;
    font-family: entypo-fontello;
    font-size: 30px;
    color: #fff;
    position: absolute;
    left: -50px;
    top: 0;
    padding: 5px 10px;
    background-color: #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
  }
}

@media only screen and (max-width: 989px) {
  #av-burger-menu-ul .anfrage a:before, 
  #av-burger-menu-ul .telefon a:before {
    font-family: entypo-fontello;
    font-size: 30px;
    color: #ddd;
    position: absolute;
    left: 0;
    top: 10px;
    padding: 5px 10px;
    width: 40px;
    height: 40px;
  }
} 

du siehst hier tauchen die benutzerdefinierten Klassen auf: anfrage und telefon
diese Menüpunkte floaten jetzt rechts. Wenn du die Positionen tauschen willst, dann ziehe im Menu die Positionen an die richtige Stelle

sorry – my imagehoster is temporarily down. – in the text there are a few images

wenn du das Logo lieber bündig mit der Navigatin haben möchtest:

#header_main .av-logo-container {
    padding: 0 5px;
}

@DouPaule – natürlich ist es erlaubt.

@digitalprint2222 : sollte die Farbe nicht ganz stimmen im svg. Dann kannst du das svg mit einem guten Texteditor der keinen zusätzlichen meta Mist mit in die Datei schreibt öffnen ( Windows: notepad++ ; Mac : Sublimetext )

Oben in deinem Logo siehst du dann ganz ähnlich wie in einem html code einen style bereich:

<style type="text/css">
	.dpg0{fill:#333333;}
	.dpg1{fill:#F4983B;}
	.dpg2{fill:#000000;}
</style>

die dpg steht für digital print group dpg1 ist das Orange – wenn du hier einen andere Farbe einträgst, das ganze abspeicherst, dann hast du die Veränderung auch schon gemacht.
PS : was wohl passieren würde wenn da stünde:

<style type="text/css">
	.dpg0{fill:#333333;}
	.dpg1{fill:#F4983B;}
	svg:hover .dpg1 { fill: #990000;}
	.dpg2{fill:#000000;}
</style>

https://webers-testseite.de/weber/DigitalPrint.svg
etc. pp