Huuuuuahhhhh...

jetzt hat das erste mal etwas geklappt...

Aber gut...

document.addEventListener('DOMContentLoaded', function () {

flyoutExtension('menu-toggle');
flyoutExtension('titel-toggle');
	
function flyoutExtension (toggleId) {

	const toggle = document.getElementById(toggleId);
	toggle.addEventListener('click', function() {
		const currentState = toggle.getAttribute('aria-expanded');
		const newState = currentState === 'true' ? 'false' : 'true';
		toggle.setAttribute('aria-expanded', newState);
		const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
        menu.hidden = !isExpanded;
	});	
}
});

Dann wohl so...

und im CSS noch [hidden] { display: none !important }

Würde DAS nun folgendes überflüssig machen?

.flyout-box [aria-expanded="false"] ~ .flyout-content {
		visibility: hidden;
}

Denn was mich momentan ein wenig nervt ist, wenn das Menü zurückslidert, war durch diese CSS Zeile der .flyout-content sofort unsichtbar.

der einsiedelnde