card.css hat jetzt die Kursfelder auf der Mainpage übernommen. Das Design das vorher in showWelcome.phtml war, ist jetzt durch card.css ersetzt

CSS/Element/card.css

@@ -0,0 +1,73 @@
+.welcome-container {
+    background-color: var(--brand-background);
+    padding: 40px 20px;
+    min-height: 100vh;
+    font-family: var(--font-family-main);
+}
+
+.welcome-heading {
+    color: var (--brand-primary);
+    font-size: var(--font-size-title-h2);
+    margin-bottom: 40px;
+}
+
+.course-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: space-between;
+    max-width: 100%;
+}
+
+.course-card {
+    flex: 0 0 calc(33.333% - 20px);
+    background: var(--brand-white);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+.course-image {
+    background-color: var(--brand-white); /* Platzhalter, später durch Kursbild ersetzen */
+    height: 200px;
+}
+
+.course-content {
+    background-color: var(--brand-primary);
+    color: var(--brand-white);
+    padding: 20px;
+    font-size: var(--font-size-text);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--font-family-main);
+}
+
+.course-left,
+.course-right {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size-small);
+}
+
+.course-left div:first-child,
+.course-right div:first-child {
+    font-weight: bold;
+    font-size: var(--font-size-text);
+}
+
+.course-right {
+    text-align: right;
+}
+
+.course-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.course-image {
+    flex: 1;
+}

Views/Welcome/showWelcome.phtml

@@ -1,45 +1,22 @@
 <?php include dirname(__DIR__) . '/header.phtml'; ?>
 
-<article style="background-color: #1f1b15; padding: 40px 20px; min-height: 100vh; font-family: sans-serif;">
+<article class="welcome-container">
 
-    <h2 style="color: orange; font-size: 28px; margin-bottom: 40px;">Kurse</h2>
+    <h2 class="welcome-heading">Kurse</h2>
 
-    <div style="
+    <div class="course-grid">
-        display: flex;
-        flex-wrap: wrap;
-        gap: 30px;
-        justify-content: space-between;
-        max-width: 100%;
-    ">
 
         <?php for ($i = 0; $i < 6; $i++): ?>
-        <div style="
+        <div class="course-card">
-            flex: 0 0 calc(33.333% - 20px);
+            <div class="course-image"></div>
-            background: #fff;
+            <div class="course-content">
-            border-radius: 12px;
+                <div class="course-left">
-            overflow: hidden;
+                    <div>5 ★ &nbsp; Marketing Pro</div>
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                    <div>Bulu ulu Straße 17</div>
-            min-height: 300px;
-            display: flex;
-            flex-direction: column;
-        ">
-            <div style="background-color: #eee; height: 200px;"></div>
-            <div style="
-                background-color: orange;
-                color: white;
-                padding: 20px;
-                font-size: 18px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            ">
-                <div>
-                    <div style="font-weight: bold;">5 ★ &nbsp; Marketing Pro</div>
-                    <div style="font-size: 14px;">Bulu ulu Straße 17</div>
                 </div>
-                <div style="text-align: right;">
+                <div class="course-right">
-                    <div style="font-weight: bold;">59,99€</div>
+                    <div>59,99€</div>
-                    <div style="font-size: 14px;">33333 Frankfurt</div>
+                    <div>33333 Frankfurt</div>
                 </div>
             </div>
         </div>
@@ -50,4 +27,3 @@
 </article>
 
 <?php include dirname(__DIR__) . '/footer.phtml'; ?>
-