fix(ui): Design-Harmonisierung mit mail-gateway — v1.2.62

- Header: blur 12px, box-shadow, padding 0 24px, bg rgba(0.97)
- Content-Area: padding 24px (war 12px/16px); @992px 16px (war 8px)
- Sidebar: active-color via CSS-Variable statt hardcodiertem #60a5fa
- Sidebar: item font-size 14px, padding 8px 10px (wie mail-gateway)
- Tabs: ink-bar height 3px (war 2px)
- stats-window-label: Pill-Style statt Block+kursiv
- page-toolbar: align flex-start, margin-bottom 20px, gap 16px
- ant-alert: left-accent 3px pro Typ (info/success/warning/error)
- Neu: ant-statistic, stat-card-*, ant-descriptions-*, ant-form-item rhythm

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

VERSION

@@ -1 +1 @@
-1.2.61
+1.2.62

management-ui/src/styles/enterprise.css

@@ -140,9 +140,9 @@ h1, h2, h3, h4, h5, h6 {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 7px 10px;
+  padding: 8px 10px;
-  font-size: 13px;
+  font-size: 14px;
-  color: rgba(255,255,255,0.6);
+  color: var(--nmg-sidebar-text, #94A3B8);
   text-decoration: none;
   border-radius: 6px;
   transition: all 0.15s ease;
@@ -154,8 +154,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .sidebar-menu-item a:hover,
 .sidebar-menu-item button:hover {
-  background: rgba(255,255,255,0.06);
+  background: rgba(255,255,255,0.05);
-  color: rgba(255,255,255,0.88);
+  color: #CBD5E1;
 }
 
 /* Child-Item: sub-nav unter einem Parent (z.B. /firewall/live unter
@@ -196,9 +196,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .sidebar-menu-item.active a,
 .sidebar-menu-item.active button {
-  background: color-mix(in srgb, var(--branding-accent, #1677ff) 12%, transparent);
+  background: color-mix(in srgb, var(--branding-accent, #1677ff) 10%, transparent);
-  color: #60a5fa;
+  color: var(--branding-accent, #1677ff);
-  font-weight: 500;
 }
 
 .sidebar-version {
@@ -272,17 +271,17 @@ h1, h2, h3, h4, h5, h6 {
 /* === HEADER === */
 .header {
   height: 56px;
-  background: #ffffff;
+  background: rgba(255,255,255,0.97);
   border-bottom: 1px solid #E5E7EB;
+  box-shadow: 0 1px 0 #E2E8F0, 0 2px 8px rgba(15,23,42,0.04);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 24px;
   position: sticky;
   top: 0;
   z-index: 50;
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(12px);
-  background: rgba(255,255,255,0.95);
 }
 
 .header-title {
@@ -299,7 +298,7 @@ h1, h2, h3, h4, h5, h6 {
 
 /* === CONTENT AREA === */
 .content-area {
-  padding: 12px 16px;
+  padding: 24px;
   flex: 1;
   overflow-x: hidden;
   min-width: 0;
@@ -663,6 +662,68 @@ h1, h2, h3, h4, h5, h6 {
   padding: 16px 20px !important;
 }
 
+/* ── Small cards — tighter body padding for stat rows ───────────────────────── */
+.ant-card.ant-card-small > .ant-card-body {
+  padding: 12px 16px !important;
+}
+
+/* ── Statistic component — enterprise KPI treatment ──────────────────────────── */
+.ant-statistic-title {
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.6px !important;
+  color: #94A3B8 !important;
+  margin-bottom: 6px !important;
+}
+.ant-statistic-content {
+  line-height: 1.1 !important;
+}
+.ant-statistic-content-value {
+  font-weight: 700 !important;
+  letter-spacing: -0.02em !important;
+  font-variant-numeric: tabular-nums !important;
+}
+.ant-statistic-content-suffix {
+  font-size: 13px !important;
+  font-weight: 400 !important;
+  color: #94A3B8 !important;
+  letter-spacing: 0 !important;
+}
+
+/* ── Semantic stat cards — danger / warning / success / info top-border ──────── */
+.stat-card-danger  { border-top: 2px solid #ff4d4f !important; background: rgba(255, 77, 79, 0.02) !important; }
+.stat-card-warning { border-top: 2px solid #faad14 !important; background: rgba(250,173, 20, 0.02) !important; }
+.stat-card-success { border-top: 2px solid #52c41a !important; background: rgba( 82,196, 26, 0.02) !important; }
+.stat-card-info    { border-top: 2px solid #1677ff !important; background: rgba( 22,119,255, 0.02) !important; }
+.stat-card-danger:hover  { border-color: #ff4d4f !important; }
+.stat-card-warning:hover { border-color: #faad14 !important; }
+.stat-card-success:hover { border-color: #52c41a !important; }
+.stat-card-info:hover    { border-color: #1677ff !important; }
+
+/* ── Descriptions (Settings, Cluster, etc.) ─────────────────────────────────── */
+.ant-descriptions-item-label {
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  color: #64748B !important;
+  background: transparent !important;
+}
+.ant-descriptions-item-content {
+  font-size: 13px !important;
+  color: #1E293B !important;
+}
+.ant-descriptions-bordered .ant-descriptions-item-label {
+  background: #F8FAFC !important;
+}
+
+/* ── Form items — slightly tighter vertical rhythm ───────────────────────────── */
+.ant-form-item {
+  margin-bottom: 20px !important;
+}
+.ant-form-item-with-help {
+  margin-bottom: 20px !important;
+}
+
 /* ── Form Inputs — shadcn style ──────────────────────────────────────────────── */
 .ant-input,
 .ant-input-affix-wrapper,
@@ -729,7 +790,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .ant-tabs .ant-tabs-ink-bar {
   background: var(--branding-primary, #1677ff) !important;
-  height: 2px !important;
+  height: 3px !important;
   border-radius: 2px !important;
 }
 
@@ -833,10 +894,17 @@ h1, h2, h3, h4, h5, h6 {
   height: 8px !important;
 }
 
-/* ── Alert ───────────────────────────────────────────────────────────────────── */
+/* ── Alert — enterprise left-accent pattern ──────────────────────────────────── */
 .ant-alert {
-  border-radius: 10px !important;
+  border-radius: 8px !important;
+  border-left-width: 3px !important;
 }
+.ant-alert-info    { border-left-color: #1677ff !important; }
+.ant-alert-success { border-left-color: #52c41a !important; }
+.ant-alert-warning { border-left-color: #faad14 !important; }
+.ant-alert-error   { border-left-color: #ff4d4f !important; }
+.ant-alert-message { font-weight: 600 !important; font-size: 13px !important; }
+.ant-alert-description { font-size: 12px !important; margin-top: 2px !important; }
 
 /* ═══════════════════════════════════════════════════════════════════════════════
    LAYOUT UTILITIES — replace inline styles in page components
@@ -1127,10 +1195,19 @@ h1, h2, h3, h4, h5, h6 {
 .full-width-stack { width: 100%; }
 
 .stats-window-label {
-  display: block;
+  display: inline-flex;
-  margin-bottom: 8px;
+  align-items: center;
-  font-size: 12px;
+  gap: 5px;
-  font-style: italic;
+  width: fit-content;
+  margin-bottom: 10px;
+  padding: 3px 10px 3px 8px;
+  background: #F8FAFC;
+  border: 1px solid #E2E8F0;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748B;
+  letter-spacing: 0.3px;
 }
 
 /* Inline-Style-Cleanup-Sweep (1.7.14): Utility-Klassen für die
@@ -1438,7 +1515,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .inline-elapsed { margin-left: 12px; font-size: 12px; }
 .upgrade-timeline { margin-top: 16px; padding-left: 8px; }
-.auto-update-hint { margin-top: 12px; font-size: 12px; margin-bottom: 0; }
+.auto-update-hint { margin-top: 4px; font-size: 12px; margin-bottom: 0; }
+.settings-updates-divider { margin: 20px 0; border-top: 1px solid #F1F5F9; }
 
 .setup-wrapper-done  { max-width: 520px; margin: 80px auto; padding: 24px; }
 .setup-wrapper-wizard { max-width: 720px; margin: 60px auto; padding: 24px; }
@@ -1473,10 +1551,10 @@ h1, h2, h3, h4, h5, h6 {
 /* Toolbar row used by page headers that mix title + actions buttons. */
 .page-toolbar {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 20px;
-  gap: 12px;
+  gap: 16px;
   flex-wrap: wrap;
 }
 
@@ -1486,6 +1564,7 @@ h1, h2, h3, h4, h5, h6 {
 .page-toolbar h4,
 .page-toolbar h5 {
   margin: 0;
+  line-height: 1.2 !important;
 }
 
 /* Inline icon+text combos */
@@ -1745,7 +1824,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   .content-area {
-    padding: 8px;
+    padding: 16px;
   }
 
   .content-card {