Enhance Training Framework Program Edit Page with New Styling and Structure

- Introduced a new PageFormEditorChrome component for improved layout and user experience.
- Updated CSS styles for the framework editor, including danger zone and delete button hover effects.
- Refactored the TrainingFrameworkProgramEditPage to utilize the new component and streamline the action configuration.
- Enhanced the page title handling for better clarity when creating or editing framework programs.

frontend/src/app.css

@@ -2475,6 +2475,20 @@ html.modal-scroll-locked .app-main {
   }
 }
 
+/* Rahmenprogramm-Editor (Vollseiten-Formular mit Action-Dock) */
+.page-form-editor__body .framework-edit {
+  min-width: 0;
+}
+.framework-edit__danger-zone {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+.framework-edit__delete-btn:hover {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
 /* Rahmenprogramm-Editor: Kurz-Einstieg ausklappbar */
 .framework-edit-intro {
   margin-bottom: 1rem;

frontend/src/pages/TrainingFrameworkProgramEditPage.jsx

@@ -5,7 +5,7 @@ import ExercisePickerModal from '../components/ExercisePickerModal'
 import ExercisePeekModal from '../components/ExercisePeekModal'
 import TrainingUnitSectionsEditor from '../components/TrainingUnitSectionsEditor'
 import PageSectionNav from '../components/PageSectionNav'
-import FormActionBar from '../components/FormActionBar'
+import PageFormEditorChrome from '../components/PageFormEditorChrome'
 import { useToast } from '../context/ToastContext'
 import { useNavReturn } from '../hooks/useNavReturn'
 import {
@@ -498,6 +498,22 @@ export default function TrainingFrameworkProgramEditPage() {
     await performFrameworkSave({ fromUnsavedDialog: false, closeAfter: true })
   }
 
+  const actionConfig = useMemo(
+    () => ({
+      saving,
+      isNew,
+      onSave: handleSave,
+      onSaveAndClose: handleSaveAndClose,
+      onCancel: goBack,
+      showSave: true,
+      showSaveAndClose: true,
+      cancelLabel: 'Abbrechen',
+    }),
+    [saving, isNew, goBack, handleSave, handleSaveAndClose]
+  )
+
+  const pageTitle = isNew ? 'Neues Rahmenprogramm' : 'Rahmenprogramm bearbeiten'
+
   const handleUnsavedDialogSave = async () => {
     const ok = await performFrameworkSave({ fromUnsavedDialog: true })
     if (ok) blocker.proceed()
@@ -893,10 +909,12 @@ export default function TrainingFrameworkProgramEditPage() {
   }
 
   return (
-    <div className="app-page">
+    <PageFormEditorChrome
+      testId="framework-program-form"
+      title={pageTitle}
+      actionConfig={actionConfig}
+    >
       <div className="framework-edit">
-        <h1 style={{ marginBottom: '0.75rem' }}>{isNew ? 'Neues Rahmenprogramm' : 'Rahmenprogramm bearbeiten'}</h1>
-
         <details className="framework-edit-intro">
           <summary className="framework-edit-intro__summary">
             Kurz erklärt: Was ist ein Rahmenprogramm?
@@ -1063,6 +1081,14 @@ export default function TrainingFrameworkProgramEditPage() {
               </select>
             </div>
           </div>
+
+          {!isNew ? (
+            <div className="framework-edit__danger-zone">
+              <button type="button" className="btn btn-secondary framework-edit__delete-btn" onClick={handleDelete}>
+                Rahmenprogramm löschen
+              </button>
+            </div>
+          ) : null}
         </div>
 
         <div
@@ -1291,20 +1317,6 @@ export default function TrainingFrameworkProgramEditPage() {
             </div>
           </div>
         </div>
-
-        <FormActionBar
-          isNew={isNew}
-          saving={saving}
-          onSave={handleSave}
-          onSaveAndClose={handleSaveAndClose}
-          onCancel={goBack}
-          cancelLabel="Abbrechen"
-        />
-        {!isNew ? (
-          <button type="button" className="btn btn-secondary" onClick={handleDelete} style={{ marginTop: '10px' }}>
-            Löschen
-          </button>
-        ) : null}
       </div>
 
       <ExercisePickerModal
@@ -1373,6 +1385,6 @@ export default function TrainingFrameworkProgramEditPage() {
         onSave={handleUnsavedDialogSave}
         onDiscardWithoutSave={() => setBypassDirty(true)}
       />
-    </div>
+    </PageFormEditorChrome>
   )
 }