Ja gut. Das Icon ist nun sichtbar.

Die Überschrift ("calandar") ist nun eine h1.

Habe nun:

.flyout-box {
		display: flex;
		justify-content: end;
		overflow: hidden;
	}
	.flyout-box > button[aria-expanded] {
		width: 113px;
		height: 160px;
		background: transparent;
		color: transparent;
		border: none;
		margin: 0.7rem;
	}
	.flyout-box > .flyout-content {
		display: block !important;
		width: var(--flyout-width);
		margin-right: calc(-0.3em - var(--flyout-width));
		transition: margin-right 0.85s;
		visibility: hidden;
	}

	.flyout-box [aria-expanded="true"] ~ .flyout-content {
		margin-right: 0;
	}
	.flyout-box button.content-visible ~ .flyout-content {
		visibility: visible;
	}

Für den icon eingefügt aber es tut sich noch NICHTS!

Woran liegt es?

Deine weiteren Anmerkungen zum Beispiel bezüglich der : Elemente etc. gehe ich heute Abend in Ruhe durch.

Erstmal möchte ich die Animationen fertig haben.

Was mich jetzt aber noch stört ist die Höhe von ul bei der Hauptnavigation.

Ich glaube man sieht es auch schon.

Die Höhe von ul bestimmt irgendwie #main-nav.

Toll wäre es jetzt wenn also das ul anfangs so hoch wie der Hamburger-Button, wenn das Menü sich öffnet passt sich die Höhe an den Content vom ul an.

Ist das machbar?

Denn so sieht es irgendwie nicht aus.

T.