2 changed files with 93 additions and 2 deletions
--- a/styles.css
+++ b/styles.css
@ -105,4 +105,67 @@ header nav a:hover {
 }
 .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;
 }
--- a/website-lara.html
+++ b/website-lara.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Meine Rennrad Website</title>
+    <title>Cycle with me</title>
    <link rel="stylesheet" href="styles.css">
 </head>

@ -36,13 +36,15 @@
    <!-- Willkommen -->
    <section>
        <h2>Willkommen</h2>
-        <p>Diese Website dreht sich um Rennräder, Technik und Training.</p>
+        <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>
@ -72,11 +74,37 @@
        </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>