feat: admin settings page UI/UX pass with WordPress-native patterns

- Header: h1 + logo in a wrapping flex row, hr.wp-header-end before the tabs,
  aria-current on the active tab; own CSS/JS enqueued only on this screen.
- Verbindung: ordered "So verbindest du Claude" steps, copy button (core
  clipboard.js + wp.a11y.speak), Site-Health-style status list, German details.
- Zugriff: roles as form-table fieldset, connections with site date format,
  empty-state row, confirm on revoke; ConnectionUsage records last use via
  WP_Application_Passwords::record_application_password_usage (once a day).
- Tools: plain-language legend, counter as inline notice, groups as core
  postboxes (postbox.js toggles, per-user closed state, summary when closed),
  fixed column widths with new "Art" column, submit above and below.
- Protokoll: site-timezone times with UTC tooltip, result icons, filters with
  labels in the list table nav, retention link to Limits.
- Limits: short labels with units and descriptions; snapshot count hidden but
  preserved.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/Admin/ConnectionTab.php

@@ -30,29 +30,53 @@ final class ConnectionTab implements AdminTab
 
     public function render(): void
     {
-        echo '<h2>' . esc_html__('MCP-Server', 'wp-lit-mcp') . '</h2>';
+        echo '<h2>' . esc_html__('So verbindest du Claude', 'wp-lit-mcp') . '</h2>';
+        echo '<ol class="lit-mcp-steps"><li>';
         printf(
-            '<p><label for="lit-mcp-url">%s</label><br>'
-                . '<input id="lit-mcp-url" type="text" class="large-text code" readonly value="%s"></p>',
-            esc_html__('Server-URL für den Connector', 'wp-lit-mcp'),
-            esc_attr(ConnectionStatus::serverUrl())
+            '<label for="lit-mcp-url">%s</label>'
+                . '<span class="lit-mcp-copy-row copy-to-clipboard-container">'
+                . '<input id="lit-mcp-url" type="text" class="large-text code" readonly value="%s">'
+                . '<button type="button" class="button lit-mcp-copy" data-clipboard-target="#lit-mcp-url">%s</button>'
+                . '<span class="success hidden" aria-hidden="true">%s</span></span>',
+            esc_html__('Server-URL kopieren:', 'wp-lit-mcp'),
+            esc_attr(ConnectionStatus::serverUrl()),
+            esc_html__('URL kopieren', 'wp-lit-mcp'),
+            esc_html__('Kopiert!', 'wp-lit-mcp')
         );
-        echo '<p>' . esc_html__(
-            'In claude.ai unter Einstellungen → Connectors → „Add custom connector“ eintragen;',
+        echo '</li><li>' . esc_html__(
+            'In claude.ai unter Einstellungen → Connectors auf „Add custom connector“ klicken und die URL einfügen.',
             'wp-lit-mcp'
-        ) . ' ' . esc_html__('Die Anmeldung läuft danach über diese Website.', 'wp-lit-mcp') . '</p>';
+        ) . '</li><li>';
+        printf(
+            /* translators: %s: link to the "Zugriff" tab */
+            esc_html__('Anmelden und den Zugriff bestätigen. Danach erscheint die Verbindung unter %s.', 'wp-lit-mcp'),
+            sprintf('<a href="%s">%s</a>', esc_url(SettingsPage::url('zugriff')), esc_html__('Zugriff', 'wp-lit-mcp'))
+        );
+        echo '</li></ol>';
 
-        echo '<h2>' . esc_html__('Status', 'wp-lit-mcp') . '</h2><table class="widefat striped"><tbody>';
+        echo '<h2>' . esc_html__('Status', 'wp-lit-mcp') . '</h2><ul class="lit-mcp-status">';
         foreach ($this->status->checks(true) as $check) {
-            $state = $check['ok'] === null ? '–' : ($check['ok'] ? '✔' : '✖');
+            [$icon, $state] = match ($check['ok']) {
+                true => ['yes-alt', __('In Ordnung:', 'wp-lit-mcp')],
+                false => ['dismiss', __('Problem:', 'wp-lit-mcp')],
+                default => ['warning', __('Hinweis:', 'wp-lit-mcp')],
+            };
             printf(
-                '<tr><th scope="row">%s</th><td>%s</td><td>%s</td></tr>',
-                esc_html($check['label']),
+                '<li class="lit-mcp-status-%1$s"><span class="dashicons dashicons-%1$s" aria-hidden="true"></span>'
+                    . '<span class="screen-reader-text">%2$s</span> <strong>%3$s</strong>'
+                    . ' <span class="lit-mcp-status-detail">%4$s</span></li>',
+                esc_attr($icon),
                 esc_html($state),
+                esc_html($check['label']),
                 esc_html($check['message'])
             );
         }
-        echo '</tbody></table>';
-        echo '<p>' . esc_html__('Weitere Prüfungen unter Werkzeuge → Website-Zustand.', 'wp-lit-mcp') . '</p>';
+        echo '</ul>';
+        printf(
+            '<p class="description">%s <a href="%s">%s</a>.</p>',
+            esc_html__('Weitere Prüfungen unter', 'wp-lit-mcp'),
+            esc_url(admin_url('site-health.php')),
+            esc_html__('Werkzeuge → Website-Zustand', 'wp-lit-mcp')
+        );
     }
 }