„Exklusives Akkordeon“ — mir fällt da spontan mein damaliges „wie beim Bildschirmtext“ (verschiedene Inhalte auf der Seite mit einem Klick sichtbar oder unsichtbar machen) ein: da sollte doch anstelle von JS auch etwas mit :has() usw. drin sein!

Etwas Ähnliches funktioniert hier mit (verkürzt, und, vorerst, nur auf :hoover getrimmt):

section.Info [version] {
	opacity: 1;
}
section.Info [version="0"] {
	color: rgb(var(--version-actual-color));
}
:where([version]) {
	& :where(:not([version="0"])) {
		opacity: 80%;
	}
}
:where(header, article, footer, info-card) {
	[version] {
		outline-color: rgb(var(--version-dummy-color) / 0.5);
	}
	[version="0"] {
		…
	}
}

body:has(section.Info:hover) [version] {
	outline-style: groove;
}
body:has(section.Info>p[version="0"]:hover) [version="0"],
body:has(section.Info>p[version="1"]:hover) [version="1"] {
	outline-style: ridge;
	…
}
body:has(section.Info:hover [version="1"]:hover) {
	& [version="1"] {
		outline-color: rgb(var(--version-outdated-color) / 0.5);
		–
	}
	& [version="0"] {
		outline-color: transparent;
	}
}
body:has(section.Info [version="0"]:hover) {
	& [version="1"] {
		outline-color: transparent;
	}
	& [version="0"] {
		outline-color: rgb(var(--version-actual-color) / 0.5);
	}
}

section.Info {
	--inactive: 0.05;
	…
	&:hover {
		opacity: 1;
		background-color: rgb(0 0 0 / var(--inactive));
	}
	& > * {
		…
	}
}