IT-Service-Detail auf Asset-Grundgerüst + Schutzbedarf-Layout gefixt

- ServiceDetailModal spiegelt jetzt das normale Asset-Detail: links
  "■ Stammdaten" (violette Karte, CIA-Badge, Provider/Kritikalität, Notizen,
  zugeordnete Prozesse), rechts "◆ Abhängigkeiten" (Verknüpfte-Assets-Tabelle
  mit Typ + CIA + CiaLegend, Reverse-Liste, Link zum Abhängigkeitsgraph),
  darunter das Risiken-Band — und erst darunter die Verantwortungsmatrix (RACI)
- SERVICE_INCLUDE um Typ/CIA der verknüpften Assets und Risk-Score erweitert,
  RACI nach controlRef sortiert
- Schutzbedarf (C/I/A) in Lieferanten- und IT-Service-Bearbeiten-Formular:
  vom gequetschten flex-Layout auf das saubere Asset-Formular-Muster umgestellt
  (grid mit Einzellabels Vertraulichkeit/Integrität/Verfügbarkeit + Normal…Sehr hoch)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/supplier-modals.tsx

@@ -221,6 +221,8 @@ export async function SupplierDetailModal({ supplier, canWrite }: { supplier: Su
 async function SupplierFields({ supplier, formId }: { supplier?: SupplierAssetDetail; formId?: string }) {
   const t = await getTranslations("suppliers");
   const tLife = await getTranslations("supplierStatus");
+  const tA = await getTranslations("assets");
+  const tLevel = await getTranslations("protectionLevel");
   const f = formId ? { form: formId } : {};
   const p = supplier?.supplierProfile;
   return (
@@ -253,14 +255,25 @@ async function SupplierFields({ supplier, formId }: { supplier?: SupplierAssetDe
         <Label>{t("criticality")}</Label>
         <div className="mt-1"><SegmentedRating name="criticality" defaultValue={p?.criticality ?? 1} form={formId} /></div>
       </div>
-      <div>
-        <Label>{t("protection")} (C/I/A)</Label>
-        <div className="mt-1 flex gap-2">
-          {(["confidentiality", "integrity", "availability"] as const).map((n) => (
-            <SegmentedRating key={n} name={n} defaultValue={(supplier?.[n] as number) ?? 1} form={formId} />
+      <fieldset className="md:col-span-2">
+        <legend className="text-sm font-medium">{t("protection")} (1–4)</legend>
+        <div className="mt-2 grid grid-cols-3 gap-4">
+          {(
+            [
+              ["confidentiality", tA("confidentiality")],
+              ["integrity", tA("integrity")],
+              ["availability", tA("availability")],
+            ] as const
+          ).map(([n, label]) => (
+            <div key={n}>
+              <Label>{label}</Label>
+              <div className="mt-1">
+                <SegmentedRating name={n} defaultValue={(supplier?.[n] as number) ?? 1} low={tLevel("1")} high={tLevel("4")} form={formId} />
+              </div>
+            </div>
           ))}
         </div>
-      </div>
+      </fieldset>
       <div>
         <Label htmlFor="nextReview">{t("nextReview")}</Label>
         <Input id="nextReview" name="nextReview" type="date" defaultValue={p?.nextReview ? p.nextReview.toISOString().slice(0, 10) : ""} className="mt-1" {...f} />