feat(t5): Fokusring für alle, 44-px-Ziele bei Touch, 16-px-Schrift (T5a A5)

- globals.css: eine Basisregel :where(:focus-visible) mit --focus-width
  und --focus-offset (Sonne 3 px), Firefox-:-moz-focusring gleichgezogen;
  --text-xs 0.8125rem.
- Fokus-Codemod (scripts/codemod-t5-focus.mjs): eigene Ringe und
  outline-none raus, sm:h-/sm:size- zu pointer-fine:, Label-Zeilen mit
  focus-ring-within; Skript-Fokus (Lücken-Liste, „Gespeichert“) bleibt.
- Button/Input 44 px, kompakt nur mit Maus; Icon-Knöpfe mit unsichtbarer
  44-px-Trefferfläche bei Touch, Nachbarn mit genug Abstand.
- 16 px in Feldern, Labels, Auswahl, Leerzuständen, Listentiteln.
- .holo-stage auf allen Beute-Bühnen, .stage-card holt den Seitenring.
- Baukasten-Wächter (src/styles/baukasten-guard.spec.ts) mit den Regeln
  aus A3–A5, Ausnahmen mit Grund; Kalender-Auswahl als Inset-Ring.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

ApiCore-Frontend/src/app/globals.css

@@ -7,6 +7,12 @@
 @custom-variant pointer-fine (@media (pointer: fine));
 @custom-variant pointer-coarse (@media (pointer: coarse));
 
+/* Type scale (spec 4.5): text-xs is 13 px (sun: 14 px), only for axes, legends and footers. */
+@theme {
+  --text-xs: 0.8125rem;
+  --text-xs--line-height: calc(1.125 / 0.8125);
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -332,6 +338,14 @@
 .holo-stage {
   --ring: var(--holo-edge-strong);
 }
+/* A page-coloured card on the stage (the outline panel) takes the page ring back. The root
+   keeps a copy of its ring for that, resolved for the current set (light, dark, sun). */
+html {
+  --page-ring: var(--ring);
+}
+.holo-stage .stage-card {
+  --ring: var(--page-ring);
+}
 
 /* Tinted surfaces: set --tint (and --tint-ink) on the element. In sun the tint becomes the
    plain card with a 2 px border in the ink instead of a 15 % wash (spec 4.3). */
@@ -430,7 +444,7 @@
     --queen-green: oklch(0.58 0.15 145);
     --queen-blue: oklch(0.52 0.15 255);
     --text-sm: 0.875rem;
-    --text-xs: 0.75rem;
+    --text-xs: 0.8125rem;
     --focus-width: 2px;
     --control-border-width: 1px;
     --comb-stroke-1: 2px;
@@ -480,7 +494,21 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
+  }
+  /* One focus style for everything (spec 4.6): a solid ring in --ring with a gap, 3 px in sun.
+     Components add no focus classes; a row whose focus target sits inside uses
+     focus-ring-within. */
+  :where(:focus-visible) {
+    outline: var(--focus-width) solid var(--ring);
+    outline-offset: var(--focus-offset);
+  }
+  /* Firefox: the preflight sets `:-moz-focusring:where(:not(iframe)) { outline: auto }` (0,1,0),
+     which beats the rule above. Firefox matches :-moz-focusring exactly where it matches
+     :focus-visible (keyboard, not a mouse click), so restating the ring here adds nothing else. */
+  :-moz-focusring:where(:not(iframe)) {
+    outline: var(--focus-width) solid var(--ring);
+    outline-offset: var(--focus-offset);
   }
   body {
     @apply bg-background text-foreground;
@@ -513,6 +541,15 @@
   }
 }
 
+/* A row whose focus target sits inside (a label with its checkbox, radio or a visually hidden
+   input) also rings the whole row, so the focus is easy to spot from arm's length (spec 4.6). */
+@utility focus-ring-within {
+  &:has(:focus-visible) {
+    outline: var(--focus-width) solid var(--ring);
+    outline-offset: var(--focus-offset);
+  }
+}
+
 /* ---------------------------------------------------------------------------
    Motion levels (see lib/motion/motion-preference.ts)
    html[data-motion] = full | subtle | off, chosen per device in the profile.
@@ -574,7 +611,6 @@
   height: 2.75rem;
   border-radius: 9999px;
   color: var(--primary-foreground);
-  outline: none;
 }
 .honey-check::before {
   content: "";
@@ -600,9 +636,6 @@
   border-color: var(--primary);
   background: color-mix(in oklch, var(--primary) 8%, var(--card));
 }
-.honey-check:focus-visible::before {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent);
-}
 .honey-check svg {
   position: relative;
   z-index: 1;