Refactored Homepage css

01-frontend/src/pages/Home.tsx

@@ -178,7 +178,7 @@ export default function Home() {
                 onChange={handlePageChange} // Seitenwechsel-Handler
                 variant="outlined"
                 shape="rounded"
-                sx={{ marginTop: 2 }}
+                className="pagination" // CSS-Klasse für die Pagination
             />
         </div>
     );

01-frontend/src/pages/pages.css

@@ -42,24 +42,32 @@
   background-color: #115293;
 }
 
-cardgrid {
+.cardgrid {
     display: grid;
     gap: 2%;
-    max-width: 3%;
+    width: 90%;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */
+    padding: 16px;
+    margin-top: auto;
+    max-height: calc(100vh - 200px); /* Dynamische Höhe, abhängig von anderen Inhalten */
+    margin: 0 auto;
 }
 
 .page-background {
     background: linear-gradient(135deg, #ece9e6, #ffffff);
-    min-height: 100vh; /* Damit der Hintergrund die gesamte Seite abdeckt */
+    height: 100vh; /* Damit der Hintergrund die gesamte Seite abdeckt */
+    min-height: 600px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    padding: 20px 0; /* Abstand oben und unten */
+    box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
 }
 
-.cardgrid {
+.pagination {
-  display: grid;
+    display: flex;
-  grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
+    justify-content: center;
-  gap: 16px;
+    margin-top: 5%;
-  padding: 16px;
 }