refactor: simplify page layout for improved responsiveness

- Removed constrained width classes from multiple pages to allow full-width layout, enhancing adaptability on larger screens.
- Updated app.css to eliminate unnecessary max-width properties, ensuring a more fluid design across various components.
- Adjusted styles in Navigation and other pages for consistent full-width presentation, improving user experience on diverse devices.

frontend/src/app.css

@@ -18,8 +18,6 @@
   --header-h: 52px;
   --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --capture-content-max: 800px;
-  /* Admin: nutzt volle Hauptspalte bis zu dieser Obergrenze (siehe .app-main:has(.admin-shell)) */
-  --admin-main-max: min(1720px, calc(100vw - 200px));
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -72,37 +70,13 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 }
 .app-logo { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
 
-/* === Seiten-Inhalt: einheitlich volle Breite bis 1023px; ab Desktop optionale Max-Breite === */
+/* === Seiten-Inhalt: volle Breite der Spalte, kein künstlicher Max-Wert auf großen Screens === */
 .app-page {
   width: 100%;
   max-width: 100%;
   min-width: 0;
   box-sizing: border-box;
 }
-
-@media (min-width: 1024px) {
-  .app-page--constrained-lg {
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .app-page--constrained-md {
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .app-page--constrained-sm {
-    max-width: 720px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .app-page--reading {
-    max-width: 640px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
 /* Form-Grids: minmax(0,…) verhindert Grid-Overflow; eine Spalte bis zum ersten Breakpoint */
 .responsive-grid-2 {
   display: grid;
@@ -1515,7 +1489,7 @@ a.analysis-split__nav-item {
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 18px 20px;
-  max-width: 720px;
+  max-width: 100%;
 }
 .skills-catalog-detail__title {
   font-size: 15px;
@@ -2307,18 +2281,13 @@ a.analysis-split__nav-item {
   .app-main {
     padding: 24px 32px 32px;
     padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
     width: 100%;
+    max-width: none;
+    margin-left: 0;
+    margin-right: 0;
     box-sizing: border-box;
   }
 
-  /* Admin: mehr horizontaler Raum für Tabellen auf großen Screens (:has ~2022+, sonst bleibt 1200px) */
-  .app-main:has(.admin-shell) {
-    max-width: var(--admin-main-max);
-  }
-
   /* Dashboard (P3): Begrüßung + Kennzahlen-Zeile */
   .dashboard-greeting {
     display: flex;
@@ -2422,7 +2391,7 @@ a.analysis-split__nav-item {
   color: var(--text3);
   margin: 4px 0 0 0;
   line-height: 1.35;
-  max-width: 640px;
+  max-width: none;
 }
 
 .dashboard-section__body {
@@ -2638,8 +2607,9 @@ a.analysis-split__nav-item {
 }
 
 .exercise-detail-shell {
-  max-width: 640px;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
+  width: 100%;
 }
 .exercise-detail-section {
   margin-bottom: 14px;
@@ -2819,11 +2789,6 @@ a.analysis-split__nav-item {
   min-width: 0;
 }
 @media (min-width: 900px) {
-  .framework-edit {
-    max-width: min(1200px, 100%);
-    margin-left: auto;
-    margin-right: auto;
-  }
   .framework-edit__tabbar {
     display: none !important;
   }
@@ -3189,8 +3154,8 @@ a.analysis-split__nav-item {
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 720px;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
   min-height: calc(100dvh - var(--header-h) - var(--nav-h) - env(safe-area-inset-bottom, 0px) - 48px);
 }
 

frontend/src/components/Navigation.jsx

@@ -23,8 +23,9 @@ function Navigation() {
       zIndex: 1000
     }}>
       <div style={{
-        maxWidth: '1200px',
-        margin: '0 auto',
+        width: '100%',
+        maxWidth: 'none',
+        margin: '0',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',

frontend/src/pages/AccountSettingsPage.jsx

@@ -98,7 +98,7 @@ function AccountSettingsPage() {
   }
 
   return (
-    <div className="page-padding app-page app-page--reading" style={{ padding: '1rem' }}>
+    <div className="page-padding app-page" style={{ padding: '1rem' }}>
       <h1 style={{ marginBottom: '0.35rem', fontSize: '1.5rem' }}>Einstellungen</h1>
       <p style={{ color: 'var(--text2)', marginBottom: '1.25rem', fontSize: '0.95rem' }}>
         Konto &amp; Sicherheit

frontend/src/pages/AdminCatalogsPage.jsx

@@ -313,7 +313,7 @@ export default function AdminCatalogsPage() {
   }
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
       <AdminPageNav />
 
       <h1 style={{ marginBottom: '24px' }}>Stammdaten-Kataloge</h1>

frontend/src/pages/AdminHierarchyPage.jsx

@@ -93,7 +93,7 @@ function AdminHierarchyPage() {
   ]
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
       <AdminPageNav />
 
       <h1 style={{ marginTop: 0 }}>Admin: Katalog-Hierarchie</h1>

frontend/src/pages/ClubsPage.jsx

@@ -143,7 +143,7 @@ function ClubsPage() {
   }
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
         <h1 style={{ marginBottom: '0.75rem' }}>Vereinsverwaltung</h1>
         <p style={{ color: 'var(--text2)', marginBottom: '1.35rem', maxWidth: '46rem', lineHeight: 1.55 }}>
           Für die Trainingsplanung wird mindestens ein <strong>Verein</strong> und eine <strong>Trainingsgruppe</strong> gebraucht.

frontend/src/pages/Dashboard.jsx

@@ -38,7 +38,7 @@ function Dashboard() {
   }
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
         <h1>Dashboard</h1>
         <p style={{ color: 'var(--text2)', marginTop: '0.5rem' }}>
           Willkommen, {user?.name || user?.email}!

frontend/src/pages/ExerciseDetailPage.jsx

@@ -144,7 +144,7 @@ function ExerciseDetailPage() {
   if (error) {
     const msg = error.message || String(error)
     return (
-      <div style={{ padding: '1rem' }} className="app-page app-page--reading">
+      <div style={{ padding: '1rem' }} className="app-page">
         <div className="card">
           <h2>Übung</h2>
           <p style={{ color: 'var(--danger)' }}>{msg}</p>

frontend/src/pages/ExerciseFormPage.jsx

@@ -699,7 +699,7 @@ function ExerciseFormPage() {
   }
 
   return (
-    <div style={{ padding: '12px' }} className="app-page app-page--constrained-sm">
+    <div style={{ padding: '12px' }} className="app-page">
       <div style={{ marginBottom: '12px' }}>
         <button type="button" className="btn btn-secondary" onClick={() => navigate('/exercises')}>
           ← Übersicht

frontend/src/pages/ExercisesListPage.jsx

@@ -352,7 +352,7 @@ function ExercisesListPage() {
   }
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
       <div
         style={{
           display: 'flex',

frontend/src/pages/MediaWikiImportPage.jsx

@@ -103,7 +103,7 @@ export default function MediaWikiImportPage() {
   }
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
       <AdminPageNav />
 
       <h1>MediaWiki Import (Semantic MediaWiki)</h1>

frontend/src/pages/SkillsPage.jsx

@@ -143,7 +143,7 @@ function SkillsPage() {
   const methodsByCategory = groupByCategory(methods)
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
         <h1 style={{ marginBottom: '1.5rem' }}>Fähigkeiten & Methoden</h1>
 
         {/* Tabs */}

frontend/src/pages/TrainerContextsPage.jsx

@@ -95,7 +95,7 @@ export default function TrainerContextsPage() {
   }
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
       <h1>Meine Trainer-Bereiche</h1>
       <p style={{ color: 'var(--text2)', marginBottom: '32px' }}>
         Definiere deine Tätigkeitsbereiche für fokussierte Ansichten und Filter.

frontend/src/pages/TrainingFrameworkProgramsListPage.jsx

@@ -41,7 +41,7 @@ export default function TrainingFrameworkProgramsListPage() {
   }
 
   return (
-    <div className="app-page app-page--constrained-md">
+    <div className="app-page">
         <div
           style={{
             display: 'flex',

frontend/src/pages/TrainingPlanningPage.jsx

@@ -534,7 +534,7 @@ function TrainingPlanningPage() {
   const selectedGroup = groups.find((g) => g.id === parseInt(selectedGroupId, 10))
 
   return (
-    <div className="app-page app-page--constrained-lg">
+    <div className="app-page">
         <h1 style={{ marginBottom: '0.35rem' }}>Trainingsplanung</h1>
         <p style={{ color: 'var(--text2)', fontSize: '0.95rem', marginBottom: '1.25rem' }}>
           Wähle eine Trainingsgruppe, lege dann Termine mit Inhalt (Abschnitte und Übungen) an — ein Plan entsteht aus einer oder mehreren{' '}

frontend/src/pages/TrainingUnitRunPage.jsx

@@ -141,7 +141,7 @@ export default function TrainingUnitRunPage() {
   }
 
   return (
-    <div className="training-run-page app-page app-page--constrained-sm" style={{ paddingBottom: '2rem' }}>
+    <div className="training-run-page app-page" style={{ paddingBottom: '2rem' }}>
       <ExercisePeekModal
         open={peekExerciseId != null}
         exerciseId={peekExerciseId}