rss bug fixes

style/home.scss

@@ -1,66 +1,63 @@
 .home-container {
-  max-width: 1200px;
+  max-width: 1100px;
   margin: 0 auto;
-  padding: 0 1.5rem;
+  padding: 0 1rem;
 }
 
 .projects-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  // Sorgt dafür, dass die Karten immer gleich breit sind
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 2rem;
-  margin-top: 2rem;
+  margin: 2rem 0;
+  // Verhindert Layout-Shifts
+  align-items: stretch;
 }
 
 .project-card {
   background: var(--white);
-  border-radius: 1.25rem;
-  overflow: hidden;
+  border-radius: 1rem;
   border: 1px solid var(--border);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  height: 100%; // Wichtig für einheitliche Höhe im Grid
 
   &:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
   }
 
   .project-image {
-    width: 100%;
-    height: 200px;
-    background: #eef2ff;
-    overflow: hidden;
-
+    height: 180px;
+    background: #f1f5f9;
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: transform 0.5s ease;
+      display: block;
     }
   }
 
-  &:hover .project-image img {
-    transform: scale(1.05);
-  }
-
   .project-content {
-    padding: 1.5rem;
+    padding: 1.25rem;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex-grow: 1;
 
     h3 {
-      margin: 0 0 0.75rem 0;
+      margin: 0 0 0.5rem 0;
       font-size: 1.25rem;
       color: var(--text-main);
     }
 
     p {
-      margin: 0 0 1.5rem 0;
-      color: var(--text-light);
       font-size: 0.95rem;
-      line-height: 1.6;
-      flex: 1;
+      color: var(--text-light);
+      line-height: 1.5;
+      margin-bottom: 1.5rem;
+      flex-grow: 1; // Drückt die Buttons nach unten
     }
   }
 
@@ -70,13 +67,14 @@
     gap: 0.75rem;
 
     a {
+      display: inline-block;
       text-decoration: none;
       padding: 0.6rem;
-      border-radius: 0.75rem;
+      border-radius: 0.5rem;
       font-size: 0.85rem;
       font-weight: 600;
       text-align: center;
-      transition: all 0.2s;
+      transition: background 0.2s;
     }
 
     .btn-download {
@@ -86,42 +84,35 @@
     }
 
     .btn-code {
-      background: #f1f5f9;
+      background: var(--bg);
       color: var(--text-main);
-      &:hover { background: #e2e8f0; }
+      border: 1px solid var(--border);
+      &:hover { background: var(--border); }
     }
   }
 }
 
 .loading-trigger {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 150px;
-  padding-bottom: 50px;
-  color: var(--text-light);
+  text-align: center;
+  padding: 3rem 0;
+  min-height: 100px;
+}
 
-  p { font-size: 0.9rem; opacity: 0.7; }
+.end-msg {
+  color: var(--text-light);
+  font-size: 0.9rem;
+  border-top: 1px solid var(--border);
+  padding-top: 2rem;
 }
 
 .spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(99, 102, 241, 0.1);
+  width: 30px;
+  height: 30px;
+  border: 3px solid var(--border);
   border-top-color: var(--primary);
   border-radius: 50%;
+  margin: 0 auto;
   animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@media (max-width: 640px) {
-  .projects-grid {
-    grid-template-columns: 1fr;
-  }
-  .home-hero h1 {
-    font-size: 2.5rem;
-  }
-}
+@keyframes spin { to { transform: rotate(360deg); } }