Sprint 8: modernes Design-System für die React-PWA

Gemeinsames Stylesheet (Tokens, Karten, Buttons, Badges, Formulare) plus
AppShell (Kopfzeile mit Navigation/Logout) statt Inline-Styles je Screen.
Kein UI-Framework als neue Abhängigkeit - schlankes eigenes CSS, damit
Build/Deploy-Weg unverändert bleibt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt

frontend/src/pages/KontrollPage.tsx

@@ -170,71 +170,74 @@ export function KontrollPage() {
 
   if (sperre) {
     return (
-      <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+      <main className="page">
         <h1>Objekt gesperrt</h1>
-        <p>
-          Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
-        </p>
-        <button onClick={() => starteKontrolle(true)} style={{ padding: "0.75rem 1.5rem" }}>
-          Trotzdem übernehmen
-        </button>
+        <div className="card">
+          <p>
+            Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
+          </p>
+          <button className="btn btn-primary" onClick={() => starteKontrolle(true)}>
+            Trotzdem übernehmen
+          </button>
+        </div>
       </main>
     );
   }
 
   if (startFehler) {
     return (
-      <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
-        <p style={{ color: "crimson" }}>{startFehler}</p>
-        <button onClick={() => starteKontrolle(false)}>Erneut versuchen</button>
+      <main className="page">
+        <div className="alert alert-danger">{startFehler}</div>
+        <button className="btn btn-secondary" onClick={() => starteKontrolle(false)}>
+          Erneut versuchen
+        </button>
       </main>
     );
   }
 
   return (
-    <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+    <main className="page">
       <h1>{objekt?.name ?? "Kontrolle"}</h1>
       {!online && (
-        <p style={{ background: "#fff3cd", padding: "0.5rem", borderRadius: 4 }}>
-          Kein Netz - Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
-        </p>
+        <div className="alert alert-warning">
+          Kein Netz – Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
+        </div>
       )}
-      <ul style={{ listStyle: "none", padding: 0 }}>
+      <ul className="card-list" style={{ marginBottom: "1.25rem" }}>
         {positionen.map((zustand) => (
-          <li
-            key={zustand.position.id}
-            style={{
-              border: "1px solid #ccc",
-              borderRadius: 8,
-              padding: "0.75rem",
-              marginBottom: "0.5rem",
-            }}
-          >
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <li key={zustand.position.id} className="card">
+            <div className="card-title-row">
               <strong>{zustand.material?.name ?? `Material ${zustand.position.material_id}`}</strong>
               <StatusBadge status={zustand.status} />
             </div>
-            <div style={{ fontSize: "0.85rem", color: "#666" }}>
+            <div className="card-subtitle">
               Soll: {zustand.position.sollmenge_effektiv} {zustand.material?.einheit ?? ""}
             </div>
-            <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+            <div className="row" style={{ marginTop: "0.6rem" }}>
               <input
                 type="number"
+                className="input"
                 value={zustand.eingabe}
                 onChange={(e) => eingabeAendern(zustand.position.material_id, e.target.value)}
-                style={{ width: "5rem", fontSize: "1.1rem", padding: "0.5rem" }}
+                style={{ width: "6rem" }}
               />
               <button
+                className="btn btn-primary"
+                style={{ flex: 1 }}
                 onClick={() => positionSenden(zustand.position.material_id, zustand.eingabe)}
-                style={{ flex: 1, fontSize: "1.1rem" }}
               >
                 Bestätigen
               </button>
             </div>
             {zustand.status === "fehler" && (
-              <div style={{ marginTop: "0.5rem" }}>
-                <p style={{ color: "crimson", margin: 0 }}>{zustand.fehlerText}</p>
-                <button onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}>
+              <div style={{ marginTop: "0.6rem" }}>
+                <p className="text-muted" style={{ color: "var(--color-danger)" }}>
+                  {zustand.fehlerText}
+                </p>
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}
+                >
                   Erneut versuchen
                 </button>
               </div>
@@ -243,29 +246,31 @@ export function KontrollPage() {
         ))}
       </ul>
 
-      {abschlussFehler && <p style={{ color: "crimson" }}>{abschlussFehler}</p>}
-      <button
-        onClick={abschliessen}
-        disabled={!alleUebertragen || wirdAbgeschlossen}
-        style={{ width: "100%", padding: "1rem", fontSize: "1.2rem" }}
-      >
-        {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
-      </button>
-      <button onClick={abbrechen} style={{ width: "100%", padding: "0.75rem", marginTop: "0.5rem" }}>
-        Kontrolle abbrechen
-      </button>
+      {abschlussFehler && <div className="alert alert-danger">{abschlussFehler}</div>}
+      <div className="stack">
+        <button
+          className="btn btn-primary btn-block"
+          onClick={abschliessen}
+          disabled={!alleUebertragen || wirdAbgeschlossen}
+        >
+          {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
+        </button>
+        <button className="btn btn-danger btn-block" onClick={abbrechen}>
+          Kontrolle abbrechen
+        </button>
+      </div>
     </main>
   );
 }
 
 function StatusBadge({ status }: { status: PositionStatus }) {
-  const konfiguration: Record<PositionStatus, { text: string; farbe: string }> = {
-    unbestaetigt: { text: "offen", farbe: "#999" },
-    wartet: { text: "nicht gespeichert", farbe: "#e0a800" },
-    wird_uebertragen: { text: "wird übertragen…", farbe: "#e0a800" },
-    gespeichert: { text: "gespeichert", farbe: "#2e7d32" },
-    fehler: { text: "Fehler", farbe: "#c62828" },
+  const konfiguration: Record<PositionStatus, { text: string; klasse: string }> = {
+    unbestaetigt: { text: "offen", klasse: "badge-neutral" },
+    wartet: { text: "nicht gespeichert", klasse: "badge-warning" },
+    wird_uebertragen: { text: "wird übertragen…", klasse: "badge-warning" },
+    gespeichert: { text: "gespeichert", klasse: "badge-success" },
+    fehler: { text: "Fehler", klasse: "badge-danger" },
   };
-  const { text, farbe } = konfiguration[status];
-  return <span style={{ color: farbe, fontWeight: "bold" }}>{text}</span>;
+  const { text, klasse } = konfiguration[status];
+  return <span className={`badge ${klasse}`}>{text}</span>;
 }