feat(frontend): implement unified design system with 17 reusable template components, skeleton loading states, and golden-ratio-based layouts

frontend/src/pages/Fahrzeuge.tsx

@@ -10,10 +10,6 @@ import {
   Chip,
   CircularProgress,
   Container,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   Grid,
   IconButton,
   InputAdornment,
@@ -63,6 +59,7 @@ import type { FahrzeugTyp } from '../types/checklist.types';
 import { usePermissions } from '../hooks/usePermissions';
 import { usePermissionContext } from '../contexts/PermissionContext';
 import { useNotification } from '../contexts/NotificationContext';
+import { FormDialog } from '../components/templates';
 
 // ── Status chip config ────────────────────────────────────────────────────────
 
@@ -447,11 +444,13 @@ function FahrzeugTypenSettings() {
         </>
       )}
 
-      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle>
-          {editing ? 'Fahrzeugtyp bearbeiten' : 'Neuer Fahrzeugtyp'}
-        </DialogTitle>
-        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+      <FormDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        onSubmit={handleSubmit}
+        title={editing ? 'Fahrzeugtyp bearbeiten' : 'Neuer Fahrzeugtyp'}
+        isSubmitting={isSaving}
+      >
           <TextField
             label="Name *"
             fullWidth
@@ -471,18 +470,7 @@ function FahrzeugTypenSettings() {
             onChange={(e) => setForm((f) => ({ ...f, icon: e.target.value }))}
             placeholder="z.B. fire_truck"
           />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
-          <Button
-            variant="contained"
-            onClick={handleSubmit}
-            disabled={isSaving || !form.name.trim()}
-          >
-            {isSaving ? <CircularProgress size={20} /> : 'Speichern'}
-          </Button>
-        </DialogActions>
-      </Dialog>
+      </FormDialog>
     </Box>
   );
 }