From 0a881fce8f95c6b439427baf562b7bd46f82a270 Mon Sep 17 00:00:00 2001
From: Claude <claude@webklar.local>
Date: Tue, 6 Oct 2026 10:03:24 +0000
Subject: [PATCH] Design: Zugangsdaten-, sr-only- und spin-Klassen nach
 global.css

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/pages/AdminPage.css | 49 -----------------------------------------
 src/styles/global.css   | 12 ++++++++++
 2 files changed, 12 insertions(+), 49 deletions(-)

diff --git a/src/pages/AdminPage.css b/src/pages/AdminPage.css
index 859b9d1..a33ec73 100644
--- a/src/pages/AdminPage.css
+++ b/src/pages/AdminPage.css
@@ -307,40 +307,6 @@
   letter-spacing: 0.04em;
 }
 
-.credential {
-  display: flex;
-  max-width: 300px;
-  align-items: center;
-  gap: 8px;
-  margin: 2px 0;
-}
-
-/* .admin-table td > span (0,1,2) setzt display: block; ohne diese Zeile klebten die Textlinks ohne Abstand am Wert */
-/* In der Tabelle stehen die Textlinks immer unter dem Wert (gleiche Zeilenhöhe in jeder Zeile), sonst wäre die Tabelle breiter als die Karte und der Löschen-Knopf läge hinter dem inneren Rollbalken */
-.admin-table td > .credential { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
-
-.credential-value {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--text);
-  font-size: 12px;
-  text-overflow: ellipsis;
-}
-
-.credential-value.is-masked {
-  color: var(--text-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  letter-spacing: 0.08em;
-}
-
-.credential .link {
-  flex: 0 0 auto;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.credential-empty { color: var(--text-faint); }
-
 .admin-credential-result {
   display: grid;
   grid-template-columns: minmax(190px, 1fr) minmax(180px, auto) minmax(180px, auto) auto;
@@ -382,21 +348,6 @@
 .admin-access-denied h1 { margin: 8px 0; }
 .admin-access-denied p { color: var(--text-muted); }
 
-.spin { animation: admin-spin 0.8s linear infinite; }
-@keyframes admin-spin { to { transform: rotate(360deg); } }
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 @media (max-width: 1060px) {
   .admin-split-layout { grid-template-columns: 1fr; }
   .admin-form-card { position: static; }
diff --git a/src/styles/global.css b/src/styles/global.css
index 68eba80..60def81 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1165,6 +1165,18 @@ div.cell-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6p
 @media (max-width: 600px) { .table-wrap th.col-status { min-width: 6rem; } }
 /* ===== ENDE Kunden-Unterseiten (P6) ===== */
 
+/* --- Rechtliches und Admin (P8) --- */
+/* Zugangsdaten (CopyableCredential), Screenreader-Text und Drehanimation. Die Regeln lagen in AdminPage.css und gelten fuer */
+/* alle Seiten (Admin-Tabelle, Kundenseite, Login). Steht direkt vor KOMPAT. */
+.credential { display: flex; max-width: 300px; align-items: center; gap: 8px; margin: 2px 0; }
+.credential .link { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
+.credential-value { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; }
+.credential-value.is-masked { color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }
+.credential-empty { color: var(--text-3); }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+/* Kein Aufrufer mehr nach P8 (der Spinner der Admin-Seite war der einzige); P10 loescht die Regel, wenn rg -w spin src --glob '!*.css' nichts findet */
+.spin { animation: spin 0.8s linear infinite; }
+
 /* ===== KOMPAT (bis P10) ===== */
 /* Uebergangsschicht: alte Klassen im neuen Look, damit Seiten und Dialoge, die noch nicht umgebaut sind, weiss, kastenlos */
 /* und lesbar bleiben. Steht am Dateiende und gewinnt dort gegen die Altregeln und gegen die anderen Stylesheets (global.css */