From f2e078b593ab0b1b585c7d014b74814230a7213c Mon Sep 17 00:00:00 2001
From: Jon Kazama <kontakt@hellion-media.de>
Date: Sat, 13 Jun 2026 21:02:15 +0200
Subject: [PATCH] a11y(focus): getoenter :focus-visible-Ring im utilities-Layer
 schlaegt die outline:none-Regeln

---
 src/css/main.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/css/main.css b/src/css/main.css
index 1d8cc92..2a6cae0 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2375,6 +2375,26 @@ body.show-desc .bm-desc { display: block; }
 .modal-input-spaced { margin-top: 8px; }
 }
 
+/* ============================================
+   A11Y FOCUS RING (v2.2)
+   ============================================ */
+@layer utilities {
+  /* A11y: sichtbarer Fokus-Ring, getoent im Theme-Akzent.
+     Liegt bewusst im spaeten utilities-Layer, damit er die 9 outline:none-Regeln
+     aus dem components-Layer ueber die Kaskaden-Ordnung schlaegt (Spezifitaet
+     zwischen Layern irrelevant). Nur :focus-visible, damit Maus-Klicks keinen Ring zeigen. */
+  :focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 70%, white 30%);
+    outline-offset: 2px;
+    border-radius: 3px;
+  }
+  /* Bookmarks/Cards: Ring leicht enger, da sie eigene Radien haben */
+  .bm-item:focus-visible,
+  .theme-card:focus-visible {
+    outline-offset: 1px;
+  }
+}
+
 /* ============================================
    RESPONSIVE — Mobile & Tablet
    ============================================ */