Sprung zum Inhalt: Seite ohne Maus in einem Schritt bedienbar

Der Tastatur-Test (pruef-tastatur.mjs, neu) zeigte auf allen fünf
geprüften Seiten dasselbe Bild: jedes Bedienelement erreichbar, Fokus
durchgehend sichtbar, keine Tastaturfalle -- aber kein Sprunglink.

Ohne ihn muss sich jemand, der die Tastatur benutzt, auf JEDER Seite
erneut durch das komplette Menü tabben (31 bis 52 Punkte), bevor der
eigentliche Inhalt beginnt. WCAG 2.4.1 verlangt genau diesen Ausweg.

An einer Stelle gelöst statt in 35 Dateien: renderHeader() in main.js
setzt das Sprungziel und stellt den Link davor.

Das tabindex="-1" am <main> ist der Teil, der meistens fehlt: ohne ihn
verschiebt der Sprung in Chrome und Safari nur die Bildlaufleiste, der
Tastaturfokus bleibt in der Navigation -- der nächste Tab landet wieder
im Menü und der Sprung war wirkungslos.

Cache-Buster auf 20260827a (244 Stellen), sonst bekäme niemand die
geänderte main.js und main.css ausgeliefert.

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/css/main.css

@@ -37,6 +37,42 @@ ul { list-style: none; margin: 0; padding: 0; }
   --shadow: 0 10px 30px rgba(0,0,0,.35);
 }
 
+/* ---------------------------------------------------------------------
+   Sprung zum Inhalt (Tastaturbedienung, WCAG 2.4.1)
+
+   Der Link ist das erste Element der Seite und für Mausnutzer unsichtbar.
+   Er darf aber NICHT mit display:none oder visibility:hidden versteckt
+   werden -- damit wäre er auch für die Tastatur verschwunden, und genau
+   die soll ihn ja erreichen. Deshalb wird er aus dem Bild geschoben und
+   kehrt zurück, sobald er den Fokus bekommt.
+
+   :focus statt :focus-visible -- ein Sprunglink wird ausschließlich per
+   Tastatur angesteuert, und ältere Browser kennen :focus-visible nicht;
+   die würden ihn dann nie zeigen.
+
+   Farbe bewusst der Akzentton auf dunklem Text (nicht umgekehrt): Das
+   ergibt rund 12:1 Kontrast, ohne dass ein greller Kasten aufblitzt.
+   --------------------------------------------------------------------- */
+.site-skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 3000;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-family: var(--font-head);
+  font-weight: 700;
+  text-decoration: none;
+  padding: .85rem 1.4rem;
+  border-radius: 0 0 var(--radius) 0;
+  box-shadow: var(--shadow);
+}
+.site-skip:focus { left: 0; }
+
+/* Das Sprungziel bekommt tabindex="-1" (siehe main.js). Ohne diese Regel
+   malt der Browser dann einen Fokusrahmen um den halben Bildschirm. */
+main[tabindex="-1"]:focus { outline: none; }
+
 body {
   background: var(--bg);
   color: var(--text);