diff --git a/lara-hofer.txt b/lara-hofer.txt
new file mode 100644
index 0000000..6abf09e
--- /dev/null
+++ b/lara-hofer.txt
@@ -0,0 +1,2 @@
+Dies ist Laras persönliches File.
+Ich schreibe mal eine zweite Zeile. 
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..01c7069
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,171 @@
+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;
+}
+
+/* styles.css (weiter unten ergänzen) */
+
+form {
+    max-width: 400px;
+    margin: 2rem auto;              /* zentriert und etwas Abstand oben/unten */
+    padding: 1rem 1.5rem;
+    background: #fafafa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+form label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+form input[type="email"] {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 1rem;
+    margin-bottom: 1rem;
+}
+
+form button {
+    background: #e30613;
+    color: #fff;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+form button:hover {
+    background: #c00311;
+}
+
+/* styles.css – am Ende hinzufügen */
+
+.message {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.message.success {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.message.error {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
\ No newline at end of file
diff --git a/website-lara.html b/website-lara.html
new file mode 100644
index 0000000..5fe5eac
--- /dev/null
+++ b/website-lara.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cycle with me</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+
+<header>
+    <h1>Rennräder</h1>
+    <nav>
+        <ul>
+            <li><a href="#">Startseite</a></li>
+            <li><a href="#">Modelle</a></li>
+            <li><a href="#">Tipps</a></li>
+            <li><a href="#">Kontakt</a></li>
+        </ul>
+    </nav>
+</header>
+
+<main>
+    <!-- Hero Section -->
+    <section class="hero">
+        <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>
+    </section>
+
+    <!-- Willkommen -->
+    <section>
+        <h2>Willkommen</h2>
+        <p>Diese Website dreht sich um Rennräder, Technik und Training. Hier erfährst du die aktuellsten Trends und Tipps aus der Welt der Rennräder.</p>
+    </section>
+
+    <!-- Marken -->
+    <section>
+        <h2>Beliebte Rennrad Marken</h2>
+        <ul>
+            <li>Thömus</li>
+            <li>Pinarello</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>
+
+    <form id="emailForm">
+        <label for="email">E-Mail Adresse:</label><br>
+        <input type="email" id="email" name="email" placeholder="deine@email.com" required>
+        <br><br>
+        <button type="submit">Absenden</button>
+        <div id="message"></div>
+    </form>
+</main>
+
+<footer>
+    <p>© 2026 Rennrad Website</p>
+</footer>
+
+<script>
+    document.getElementById('emailForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+        
+        const email = document.getElementById('email').value;
+        const messageDiv = document.getElementById('message');
+        
+        if (email.trim() === '') {
+            messageDiv.textContent = '❌ Bitte gib eine gültige E-Mail Adresse ein.';
+            messageDiv.className = 'message error';
+        } else {
+            messageDiv.textContent = '✅ Danke! Deine E-Mail wurde erfolgreich versendet.';
+            messageDiv.className = 'message success';
+            document.getElementById('email').value = '';  // Feld leeren
+        }
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file
