diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..a654551
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,108 @@
+body, html {
+    margin: 5;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background: #fff;
+    color: #333;
+}
+header {
+    background: #e30613;      /* Thömus‑Rot */
+    color: #fff;
+    padding: 1rem;
+}
+header nav ul {
+    list-style: none;
+    margin: 10;
+    padding: 0;
+    display: flex;
+    gap: 1rem;
+}
+header nav a {
+    color: #fff;
+    text-decoration: none;
+}
+header nav a:hover {
+    text-decoration: underline;
+}
+
+/* Hero */
+.hero {
+    position: relative;
+    text-align: center;
+    color: #fff;
+}
+.hero img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+}
+.hero .overlay {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(0,0,0,0.5);
+}
+.hero .content {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 1rem 2rem;
+}
+.hero .content h2 {
+    margin: 0 0 .5rem;
+    font-size: 2rem;
+}
+.hero .content a {
+    display: inline-block;
+    margin-top: 1rem;
+    padding: .75rem 1.5rem;
+    background: #e30613;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: bold;
+}
+.hero .content a:hover {
+    background: #c00311;
+}
+
+/* Tiles */
+.tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
+    gap: 1rem;
+    padding: 2rem 1rem;
+}
+.tile {
+    background: #fafafa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    text-align: center;
+}
+.tile img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+}
+.tile h3 {
+    margin: .5rem 0;
+}
+.tile p {
+    padding: 0 1rem 1rem;
+    font-size: .9rem;
+    color: #555;
+}
+.tile a {
+    display: block;
+    margin: 0 1rem 1rem;
+    padding: .5rem;
+    background: #e30613;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 3px;
+}
+.tile a:hover {
+    background: #c00311;
+}
\ No newline at end of file
diff --git a/website-lara.html b/website-lara.html
index df6999b..49f97ad 100644
--- a/website-lara.html
+++ b/website-lara.html
@@ -3,60 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cycle with ma</title>
-    <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            font-family: Arial, sans-serif;
-        }
-        header {
-            background: #333;
-            color: #fff;
-            padding: 1rem;
-        }
-        header nav ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            gap: 1rem;
-        }
-        header nav a {
-            color: #fff;
-            text-decoration: none;
-        }
-        .hero {
-            position: relative;
-            text-align: center;
-            color: #fff;
-        }
-        .hero-image {
-            width: 100%;
-            height: auto;
-            display: block;
-            object-fit: cover;
-        }
-        .hero-content {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(0, 0, 0, 0.4);
-            padding: 2rem;
-            border-radius: 8px;
-        }
-        .hero-button {
-            display: inline-block;
-            margin-top: 1rem;
-            padding: 0.75rem 1.5rem;
-            background: #ff9900;
-            color: #333;
-            text-decoration: none;
-            border-radius: 4px;
-            font-weight: bold;
-        }
-    </style>
+    <title>Meine Rennrad Website</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
@@ -76,28 +24,54 @@
 <main>
     <!-- Hero Section -->
     <section class="hero">
-        <div class="hero-content">
-            <h2>Willkommen bei Rennrad-Glück</h2>
-            <p>Entdecke Technik, Training und Top-Modelle für deine nächste Fahrt.</p>
-            <a href="#" class="hero-button">Mehr erfahren</a>
+        <img src="hero-bike.jpg" alt="Rennrad auf offener Straße">
+        <div class="overlay"></div>
+        <div class="content">
+            <h2>Erlebe die Freiheit auf zwei Rädern</h2>
+            <p>Alles rund ums Rennrad – Technik, Training und Inspiration.</p>
+            <a href="#">Mehr erfahren</a>
         </div>
-        <img src="hero-bike.jpg" alt="Rennrad auf offener Straße" class="hero-image">
     </section>
+
+    <!-- Willkommen -->
     <section>
         <h2>Willkommen</h2>
         <p>Diese Website dreht sich um Rennräder, Technik und Training.</p>
     </section>
 
+    <!-- Marken -->
     <section>
         <h2>Beliebte Rennrad Marken</h2>
         <ul>
-            <li>Thömus</li>
             <li>Specialized</li>
             <li>Trek</li>
             <li>Canyon</li>
             <li>Bianchi</li>
         </ul>
     </section>
+
+    <!-- Kachel‑Grid -->
+    <section class="tiles">
+        <div class="tile">
+            <img src="tile1.jpg" alt="Produkt 1">
+            <h3>Produkt 1</h3>
+            <p>Kurze Beschreibung des Produkts oder Blogbeitrags.</p>
+            <a href="#">Details</a>
+        </div>
+        <div class="tile">
+            <img src="tile2.jpg" alt="Produkt 2">
+            <h3>Produkt 2</h3>
+            <p>Kurze Beschreibung des Produkts oder Blogbeitrags.</p>
+            <a href="#">Details</a>
+        </div>
+        <div class="tile">
+            <img src="tile3.jpg" alt="Produkt 3">
+            <h3>Produkt 3</h3>
+            <p>Kurze Beschreibung des Produkts oder Blogbeitrags.</p>
+            <a href="#">Details</a>
+        </div>
+        <!-- weitere Kacheln nach Bedarf -->
+    </section>
 </main>
 
 <footer>
