fix(t5): Rechte-Matrix nach Containerbreite, „Nicht geprüft“ passt, Glas-Knopf gedrückt

Browser-Prüfung A7:
- Die Rechte-Matrix im 384-px-Dialog nahm drei Spalten nach der
  Fensterbreite und schnitt Labels ab; jetzt Container-Queries.
- Dreifach-Auswahl: drei Spalten nur, wo „Nicht geprüft“ hineinpasst,
  sonst rutscht die dritte Option in die nächste Zeile.
- Gedrückter Glas-Knopf („Aufbau als Liste“) mit 2-px-Rahmen in
  holo-edge-strong statt nur Füllung.

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

ApiCore-Frontend/src/app/(app)/settings/users-roles/permission-matrix.tsx

@@ -74,7 +74,9 @@ export function PermissionMatrix({
   }
 
   return (
-    <div className="flex flex-col gap-4 rounded-xl border border-border/60 p-3">
+    // Container queries: the matrix sits in a 384 px dialog on a wide screen,
+    // so the columns follow its own width, not the viewport.
+    <div className="@container flex flex-col gap-4 rounded-xl border border-border/60 p-3">
       {disabled ? (
         <p id={hintId} className="text-sm font-medium text-muted-foreground">
           {disabledHint}
@@ -102,7 +104,7 @@ export function PermissionMatrix({
               describedBy={describedBy}
               onCheckedChange={(checked) => toggleGroup(group.entries, checked)}
             />
-            <div className="grid grid-cols-1 gap-x-4 gap-y-1 pl-8 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-x-4 gap-y-1 pl-8 @lg:grid-cols-2 @3xl:grid-cols-3">
               {group.entries.map((entry) => (
                 <CheckboxField
                   key={entry.key}

ApiCore-Frontend/src/components/form/tri-state-field.tsx

@@ -35,7 +35,9 @@ export function TriStateField({ label, value, onChange, previous }: TriStateFiel
         options={TRI_STATE_OPTIONS}
         value={value}
         onChange={onChange}
-        className="grid-cols-3"
+        // Three columns only where „Nicht geprüft“ fits (≈ 6.5rem with its
+        // mark); in a narrow form column the third option wraps below.
+        className="grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))]"
       />
       {previous ? (
         <PreviousValueHint

ApiCore-Frontend/src/components/hive/hive-glass.ts

@@ -7,6 +7,6 @@ const GLASS_FILL = "bg-holo-label-bg/70 text-holo-label-fg backdrop-blur-md";
 
 export const GLASS_SURFACE = `border border-white/15 shadow-[0_8px_24px_-12px_rgb(0_0_0/0.6)] ${GLASS_FILL}`;
 
-export const GLASS_BUTTON = `inline-flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl px-3 text-sm sm:gap-2 sm:px-4 font-medium transition-colors hover:bg-holo-label-bg/90 disabled:cursor-not-allowed disabled:opacity-60 aria-pressed:border-holo-edge/70 aria-pressed:bg-holo-edge/25 [&_svg]:size-5 border border-holo-edge/35 shadow-[0_0_18px_-8px_var(--holo-edge)] ${GLASS_FILL}`;
+export const GLASS_BUTTON = `inline-flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl px-3 text-sm sm:gap-2 sm:px-4 font-medium transition-colors hover:bg-holo-label-bg/90 disabled:cursor-not-allowed disabled:opacity-60 aria-pressed:border-2 aria-pressed:border-holo-edge-strong aria-pressed:bg-holo-edge/25 [&_svg]:size-5 border border-holo-edge/35 shadow-[0_0_18px_-8px_var(--holo-edge)] ${GLASS_FILL}`;
 
 export const GLASS_PILL = `inline-flex h-11 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-medium transition-colors hover:bg-holo-label-bg/90 ${GLASS_SURFACE}`;