Ich habe mal ein wenig herumexperimentiert.

<!-- SKIP - to TOP LINK -->	
		<div id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper">
			<h2 class="visually-hidden">Skip-to-TOP</h2>
			<ul id="skiptop-label" class="scroll-top_link">
				<li><a href="#skip-to-top"><span>skip to top</span></a></li>
			</ul>
		</div>

#skiptop {
		
	grid-area: main-content / main-nav;
	position: relative;}

.scroll-top-wrapper {
	position: absolute;
	top: 100vh;
	right: 0.25rem;
	bottom: -5em;
	width: 3em;
	pointer-events: none;
	display: inherit;
		grid-template-rows: inherit;}

.scroll-top_link {
	position: fixed;
	 position: sticky;
	 pointer-events: all;
	 top: calc(100vh - 5rem);
	 display: inline-block;
	 text-decoration: none;
	 font-size: 2rem;
	 line-height: 3rem;
	 text-align: center;
	 width: 3rem;
	 height: 3rem;
	 border-radius: 50%;
	 padding: 0.25rem;
	 border: 1px solid #254568;
	 background-color: #d6e3f0;
	 transition: transform 80ms ease-in;}

Damit habe ich zwar meinen gewünschten Effekt, aber durch das 100vh wird das Grid-Raster nach unten hin überschritten.

Warum ist das so?

% - Werte funktionieren nicht, was gibt es noch für Möglichkeiten?

Der Link zur betroffenen Seite ist immer-noch: Testseite V10A

So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion.

Aber auch an die anderen, bitte ich um Unterstützung. ich möchte mal voran kommen.

Grüße der einsiedelde