From 73cd322a712984e69350503fb60fd72aa8e23dc8 Mon Sep 17 00:00:00 2001
From: ulsklyc <ulas@kalayci.cloud>
Date: Thu, 26 Mar 2026 13:37:07 +0100
Subject: [PATCH] =?UTF-8?q?a11y:=20Skip-Link=20f=C3=BCr=20Keyboard-Navigat?=
 =?UTF-8?q?ion=20(Redesign=20Phase=20D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Skip-Link "Zum Inhalt springen" als erstes Element im App-Shell
- .sr-only:focus-visible CSS: sichtbar bei Tab-Focus, fixed top-left

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/router.js         |  1 +
 public/styles/layout.css | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/public/router.js b/public/router.js
index 324b849..cd9ee85 100644
--- a/public/router.js
+++ b/public/router.js
@@ -145,6 +145,7 @@ async function renderPage(route) {
  */
 function renderAppShell(container) {
   container.innerHTML = `
+    <a href="#page-content" class="sr-only">Zum Inhalt springen</a>
     <nav class="nav-sidebar" aria-label="Hauptnavigation">
       <div class="nav-sidebar__logo"><span>Oikos</span></div>
       <div class="nav-sidebar__items" role="list">
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 210a208..a01e439 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -1235,3 +1235,24 @@
     content: none;
   }
 }
+
+/* --------------------------------------------------------
+ * Skip-Link (sichtbar bei Keyboard-Focus)
+ * -------------------------------------------------------- */
+.sr-only:focus-visible {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: auto;
+  height: auto;
+  padding: var(--space-2) var(--space-4);
+  margin: 0;
+  clip: auto;
+  white-space: normal;
+  overflow: visible;
+  background: var(--color-accent);
+  color: #fff;
+  font-size: var(--text-sm);
+  border-radius: 0 0 var(--radius-sm) 0;
+}