Implement full-page planning unit editor layout and enhance form behavior

- Added new CSS styles for the planning unit editor to manage scrolling and layout, ensuring a responsive design.
- Updated the TrainingUnitFormShell component to include new class names for better styling and structure.
- Modified the TrainingUnitEditPage to support the new layout, improving user experience when editing training units.

frontend/src/app.css

@@ -1450,6 +1450,63 @@ html.modal-scroll-locked .app-main {
   padding-right: var(--page-pad, 16px);
 }
 
+/* Einheiten-Editor (Vollseite): Scroll im Formular, Action Bar am unteren Formularrand */
+.app-main:has(.planning-unit-edit-host) {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.planning-layout:has(.planning-unit-edit-host) {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.planning-layout__main:has(.planning-unit-edit-host) {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.planning-unit-edit-host {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.planning-unit-edit-host__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.page-form-shell--fill {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+.page-form-shell--fill .page-form-shell__scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  overscroll-behavior-x: none;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 4px;
+}
+.page-form-shell--fill .form-action-bar {
+  position: static;
+  margin-top: auto;
+  flex-shrink: 0;
+}
+.form-action-bar--page {
+  flex-shrink: 0;
+}
+
 /* Einstellungen: gleiche Split-Struktur wie Analyse/Admin */
 .settings-shell {
   width: 100%;

frontend/src/components/planning/TrainingUnitFormShell.jsx

@@ -52,14 +52,14 @@ export default function TrainingUnitFormShell({
   }, [planningClubId, memberClubs])
 
   return (
-    <div data-testid="planning-unit-form">
-      <h1 className="page-title" style={{ marginBottom: '1rem' }}>
+    <div className="planning-unit-edit-host__body" data-testid="planning-unit-form">
+      <h1 className="page-title" style={{ marginBottom: '1rem', flexShrink: 0 }}>
         {editingUnit ? 'Trainingseinheit bearbeiten' : 'Neue Trainingseinheit'}
       </h1>
 
       <form
         id={formId}
-        className="card page-form-shell"
+        className="card page-form-shell page-form-shell--fill"
         style={{ padding: 'clamp(14px, 3vw, 1.75rem)' }}
         onSubmit={(e) => (onSaveAndClose ? onSaveAndClose(e) : onSaveOnly?.(e))}
       >

frontend/src/pages/TrainingUnitEditPage.jsx

@@ -568,8 +568,8 @@ export default function TrainingUnitEditPage() {
   }
 
   return (
-    <div className="app-page">
-      <p style={{ marginBottom: '0.75rem' }}>
+    <div className="planning-unit-edit-host">
+      <p style={{ marginBottom: '0.75rem', flexShrink: 0 }}>
         <Link to={planningHubPathFromReturnState(location.state?.planningReturn)} style={{ color: 'var(--accent-dark)' }}>
           ← Zurück zur Trainingsplanung
         </Link>