a11y(focus): getoenter :focus-visible-Ring im utilities-Layer schlaegt die outline:none-Regeln

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
    ============================================ */