if you see this page – that has your initial setting with text-blocks in columns (equal height ) – images floating left and text directly behind it.
But you see on last column row – that with equal height option the space to top is much bigger than on the other images besides other landscape images.

https://webers-testseite.de/jak73/

Password: is the last name of that logo ( capitalize )

there are new filters: avf_dynamic_css_additional_vars and avf_dynamic_css_after_vars

but you can redefine those var color definitions in quick css too.
but that means all elements that use these enfold default values ( set in enfold options – general styling) are replaced.
All manually set colors inside alb elements stay as they are.

f.e. for your ID 777:

.html_entry_id_777,
#top.page-id-777 {
	--enfold-header-color-bg: #eee;
	--enfold-main-color-bg: #eee; 
	--enfold-footer-color-bg: #eee;
	--enfold-alternate-color-bg2: #eee;
	--enfold-header-color-bg2: #eee;
	--enfold-socket-color-bg: #eee;
	--enfold-socket-color-border: #eee;
}

you can now add all page id’s comma separated in that replacement.

or like mentioned above ( Günter provided me with a working filter code ) via child-theme functions.php
(after that it is neccessary to refresh all cachings):

function my_avf_dynamic_css_after_vars( $output = '' )
{
	$output .= "\n";
	/*** Override a defined var for a specific page id*/
	$output .= "html.html_entry_id_777,  html.html_entry_id_12345 {\n";
	$output .=		"--enfold-header-color-bg: #aaa;\n";
	$output .=		"--enfold-header-color-bg2: #aaa;\n";
	$output .=		"--enfold-main-color-bg: #aaa;\n";
	$output .=		"--enfold-footer-color-bg: #aaa;\n";
	$output .=		"--enfold-alternate-color-bg: #aaa;\n";
	$output .=		"--enfold-alternate-color-bg2: #aaa;\n";
	$output .=		"--enfold-socket-color-bg: #aaa;\n";
	$output .=		"--enfold-socket-color-border: #aaa;\n";
	$output .= "}\n";
	return $output;
}
add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );

maybe that is the better way – because it is early in the page generation done – then replacement via css redefinition.
btw: it is possible too – to have even mediaqueries here on the filter .

you could go and set that one rule for non responsive case :
(grid-template-columns: 35% 65%;)

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 35% 65%;
  grid-template-areas:
"feld2 feld1";
  align-items: flex-end;
  overflow: hidden;
}

But you had to manually insert softhyphens to some of your titles.
By the way: Self Contained and on the one image Selfcontained ?

It is difficult to fulfill all your requirements because the preconditions are of course not identical. Different image formats and aspect ratios paired with titles of different lengths.

try to change that one rule to:

(it is only that line changed: grid-template-columns: auto 1fr; )

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  grid-template-areas:
"feld2 feld1";
  align-items: flex-end;
}

you like to remove it everywhere – or only on those portrait fotos?

maybe try without equal-height flex-columns.
The equal height is something that will come with the grid-layout automatically ;)

after inserting the image – click on that image once – you can see a popup with a little pencil (edit) then a new popup with details to that image opens.

Well it seems to be best – to use the text block – because selectors stays the same for image with link or without.
On image alb – the selectors change – and we had to differ than if an image alb is used with or without.

See on the bottom of that example page – that on the image with lightbox link it does not work with the same class.
So we had than to make that twice with a different class.

PS: the field definitions are only set by css

you had to think of the custom class on the image with caption. that has to be done on the image alb.
The Text is the caption text. And the css comes to quick css. Every image with caption will than do this layout.

Further reading:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.joshwcomeau.com/css/interactive-guide-to-grid/

You can see how easy it is to influence existing layouts with Gridlayout.
Here it is easier to assign field names to both (the image container and the caption text).
I can then use them in a grid.
This grid now has 2 columns. The rows are created automatically, but their heights are adjusted – and not fixed.
Use this (grid-template-areas: “field2 field1”) to define the order. The other way around, the caption text would be on the left.

Responsive Case had to be set in detail look to the real page.

the section itself is set to : av-small-hide av-mini-hide.
those flex_columns with .scroll-reveal trigger are set on visibility : av-hide-on-mobile
look at the column advanced tab under responsive. Your added Class could not work on that – because it is set to display : none by your responsive settings.

is it because you are working with the other option to show that animation?

if this section and the columns are set to be there on responsive case the class “active” is added.

_____________________

by the way – this is my observer sccript to get a new class added to flex-columns that comes into viewport.
( i do not stop observing, because i like the animation on scroll-in/out again and again ;)

function observe_columns() {
?>
<script type="text/javascript">	
	document.addEventListener("DOMContentLoaded", function() {
	  var flexcolumns = [].slice.call(document.querySelectorAll(".flex_column"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let flexcolumnObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("visible");

					}
					else {
						entry.target.classList.remove("visible");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "20px 0px -10px 0px",
			});
			
			flexcolumns.forEach(function(flexcolumn) {
				flexcolumnObserver.observe(flexcolumn);
			});
	  	}
	});
</script>
<?php
}
add_action( 'wp_footer', 'observe_columns' );

see in action f.e. under “Dienstleistungen”
https://webers-web.info/

Do you prevent the hover for first level menu items? By default, these are available for the desktop menu.
This is the reason – why i had to click (including load of that extra page) to see the sublevel menu-items.

and the answers on https://kriesi.at/support/topic/vertical-align-of-images-in-portfolio-grid/ do not fit ;)

click to enlarge:

the variable regular font of hankengrotesk got 60kb !
loog to those other fonts with over 1MB ! This comes from all the non latin fonts in there.
Think of your performance of the website.

Half-Time in Cologne ;)

we could talk about using the HankenGrotesk Variable font – to have a good fallback solution it might be good to have those static font in the background.
Enfold even supports those varible fonts
see here on firefox developer tools how they can be used:
https://player.vimeo.com/video/748702665

here are both zip files for download:
HankenGrotesk and HankenGrotesk-Variable

The trick will be to have for modern browsers the variable font and for those not supporting variable fonts the static one.

The crux is to activate on general settings the static font – and then have this in your child-theme quick css to force for all browser the variable font:

@supports (font-variation-settings: normal) {
  :root {
    --enfold-font-family-heading:'hankengrotesk-variable',Helvetica,Arial,sans-serif;
    --enfold-font-family-body: 'hankengrotesk-variable',Helvetica,Arial,sans-serif;
  }
  body.roboto {
    font-family:'hankengrotesk-variable'  !important;
  }
  h1,h2,h3,h4,h5,h6,
  #top .title_container .main-title,
  tr.pricing-row td,
  #top .portfolio-title,
  .callout .content-area,
  .avia-big-box .avia-innerbox,
  .av-special-font,
  .av-current-sort-title,
  .html_elegant-blog #top .minor-meta,
  #av-burger-menu-ul li {
    font-family: 'hankengrotesk-variable' !important;
 }
}