fix(t5): „Nicht geprüft“ bricht um, gedrückte Knöpfe mit Tintenrahmen

Browser-Prüfung A6: In drei Spalten lief das fette „Nicht geprüft“ in den
gestrichelten Rahmen; die Beschriftung bricht jetzt um. Fett/Kursiv
zeigten den gedrückten Zustand nur über die Füllfarbe; Button pressed
bekommt zusätzlich einen 2-px-Rahmen in Vordergrundfarbe.

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

ApiCore-Frontend/src/components/form/choice-group.tsx

@@ -83,7 +83,7 @@ function targetIndex(key: string, current: number, count: number): number | null
 
 const OPTION_CLASS: Record<ChoiceAppearance, string> = {
   buttons:
-    "inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2 text-base motion-safe:transition-colors",
+    "inline-flex min-h-11 min-w-0 items-center justify-center gap-1.5 rounded-lg px-2 py-1 text-base motion-safe:transition-colors",
   cards:
     "flex min-h-14 w-full items-start gap-3 rounded-lg px-3 py-2 text-left text-base motion-safe:transition-colors",
 };
@@ -141,7 +141,9 @@ function OptionContent<T extends ChoiceValue>({
           ) : null}
         </span>
       ) : (
-        <span>{label}</span>
+        // A long label („Nicht geprüft“ in three columns on a phone) wraps
+        // instead of running into the frame.
+        <span className="min-w-0 text-balance text-center leading-tight">{label}</span>
       )}
     </>
   );

ApiCore-Frontend/src/components/ui/button.tsx

@@ -68,7 +68,13 @@ function Button({
     <ButtonPrimitive
       data-slot="button"
       aria-pressed={pressed}
-      className={cn(buttonVariants({ variant, size, className }))}
+      // Pressed is shown by a 2 px ink frame too, not by the fill colour alone
+      // (spec 10.7); a caller's own classes still win.
+      className={cn(
+        buttonVariants({ variant, size }),
+        pressed && "border-2 border-foreground",
+        className,
+      )}
       {...props}
     />
   )

ApiCore-Frontend/src/components/ui/ui-sizes.spec.tsx

@@ -85,12 +85,15 @@ describe("ui sizes, type and focus (spec 4.5, 4.6)", () => {
       </Button>,
     );
     expect(screen.getByRole("button", { name: "Fett" })).toHaveAttribute("aria-pressed", "true");
+    // Not by colour alone: a pressed button also gets the 2 px ink frame.
+    expect(screen.getByRole("button", { name: "Fett" })).toHaveClass("border-2", "border-foreground");
     rerender(
       <Button pressed={false} aria-label="Fett">
         B
       </Button>,
     );
     expect(screen.getByRole("button", { name: "Fett" })).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByRole("button", { name: "Fett" })).not.toHaveClass("border-2");
     rerender(<Button aria-label="Fett">B</Button>);
     expect(screen.getByRole("button", { name: "Fett" })).not.toHaveAttribute("aria-pressed");
   });