diff --git a/css/style.css b/css/style.css
index 9a6779f..1c77677 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2441,6 +2441,82 @@ textarea {
   text-align: center;
 }
 
+/* ===========================
+   Kontaktformular Validierung
+   =========================== */
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  margin-bottom: 0.4rem;
+  font-weight: 600;
+  color: #d946ef;
+}
+
+.field-error {
+  display: block;
+  margin-top: 0.35rem;
+  font-size: 0.85rem;
+  color: #dc2626;
+  min-height: 1.1em;
+}
+
+input.input-error,
+textarea.input-error {
+  border-color: #dc2626 !important;
+  background: #fff5f5;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+}
+
+body.dark input.input-error,
+body.dark textarea.input-error {
+  background: rgba(220, 38, 38, 0.1);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
+}
+
+body.dark .field-error {
+  color: #fca5a5;
+}
+
+body.dark .form-group label {
+  color: #60a5fa;
+}
+
+.form-success {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.85rem;
+  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
+  color: #166534;
+  border: 2px solid #16a34a;
+  border-radius: 14px;
+  padding: 1.25rem 1.5rem;
+  margin-top: 1.25rem;
+  font-size: 1rem;
+  animation: fadeInUp 0.4s ease;
+}
+
+.form-success-icon {
+  font-size: 1.6rem;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+body.dark .form-success {
+  background: linear-gradient(135deg, rgba(22, 163, 74, 0.15), rgba(21, 128, 61, 0.2));
+  color: #86efac;
+  border-color: #16a34a;
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 /* ===========================
    Hamburger Menu Button
    =========================== */
diff --git a/js/script.js b/js/script.js
index 047cba8..d1162f8 100644
--- a/js/script.js
+++ b/js/script.js
@@ -156,72 +156,105 @@ function openLightbox(imageSrc) {
 
 function initializeContactForm() {
   const form = document.getElementById('contactForm');
-  const formMessage = document.getElementById('formMessage');
-  
   if (!form) return;
-  
+
+  // Live-Validierung: Fehler beim Verlassen des Feldes clearen
+  ['name', 'email', 'subject', 'message'].forEach(function(id) {
+    const field = document.getElementById(id);
+    if (field) {
+      field.addEventListener('input', function() {
+        clearFieldError(id);
+      });
+    }
+  });
+
   form.addEventListener('submit', function(e) {
     e.preventDefault();
-    
-    // Get form data
-    const name = document.getElementById('name').value.trim();
-    const email = document.getElementById('email').value.trim();
+
+    const name    = document.getElementById('name').value.trim();
+    const email   = document.getElementById('email').value.trim();
     const subject = document.getElementById('subject').value.trim();
     const message = document.getElementById('message').value.trim();
-    
-    // Validate
-    if (!name || !email || !subject || !message) {
-      showFormMessage('Bitte füllen Sie alle Felder aus.', 'error');
-      return;
+
+    let valid = true;
+
+    // Name prüfen
+    if (!name) {
+      showFieldError('name', 'Bitte gib deinen Namen ein.');
+      valid = false;
+    } else {
+      clearFieldError('name');
     }
-    
-    // Validate email format
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(email)) {
-      showFormMessage('Bitte geben Sie eine gültige E-Mail-Adresse ein.', 'error');
-      return;
+
+    // E-Mail prüfen
+    if (!email) {
+      showFieldError('email', 'Bitte gib deine E-Mail-Adresse ein.');
+      valid = false;
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      showFieldError('email', 'Die E-Mail-Adresse muss ein @ enthalten und gültig sein.');
+      valid = false;
+    } else {
+      clearFieldError('email');
     }
-    
-    // Show success message (in production, this would send to a server)
-    showFormMessage(
-      'Vielen Dank! Ihre Nachricht wurde erfolgreich eingegeben. ' +
-      '(In einer produktiven Umgebung würde diese an den Server gesendet.)',
-      'success'
-    );
-    
-    // Reset form
+
+    // Betreff prüfen
+    if (!subject) {
+      showFieldError('subject', 'Bitte gib einen Betreff ein.');
+      valid = false;
+    } else {
+      clearFieldError('subject');
+    }
+
+    // Nachricht prüfen
+    if (!message) {
+      showFieldError('message', 'Bitte schreib uns eine Nachricht.');
+      valid = false;
+    } else if (message.length < 10) {
+      showFieldError('message', 'Die Nachricht sollte mindestens 10 Zeichen lang sein.');
+      valid = false;
+    } else {
+      clearFieldError('message');
+    }
+
+    if (!valid) return;
+
+    // Erfolg
     form.reset();
-    
-    console.log('Form data:', { name, email, subject, message });
+    ['name', 'email', 'subject', 'message'].forEach(clearFieldError);
+
+    const formMessage = document.getElementById('formMessage');
+    if (formMessage) {
+      formMessage.innerHTML =
+        '<div class="form-success">' +
+          '<span class="form-success-icon">✅</span>' +
+          '<div>' +
+            '<strong>Danke für deine Nachricht!</strong><br>' +
+            'Wir melden uns bald bei dir. 💕' +
+          '</div>' +
+        '</div>';
+      formMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
   });
 }
 
+function showFieldError(fieldId, message) {
+  const field = document.getElementById(fieldId);
+  const errorEl = document.getElementById('error-' + fieldId);
+  if (field) field.classList.add('input-error');
+  if (errorEl) errorEl.textContent = message;
+}
+
+function clearFieldError(fieldId) {
+  const field = document.getElementById(fieldId);
+  const errorEl = document.getElementById('error-' + fieldId);
+  if (field) field.classList.remove('input-error');
+  if (errorEl) errorEl.textContent = '';
+}
+
 function showFormMessage(message, type) {
   const formMessage = document.getElementById('formMessage');
   if (!formMessage) return;
-  
   formMessage.textContent = message;
-  formMessage.style.padding = '1rem';
-  formMessage.style.marginTop = '1rem';
-  formMessage.style.borderRadius = '6px';
-  formMessage.style.borderLeft = '4px solid';
-  
-  if (type === 'success') {
-    formMessage.style.background = '#dcfce7';
-    formMessage.style.color = '#166534';
-    formMessage.style.borderLeftColor = '#16a34a';
-  } else if (type === 'error') {
-    formMessage.style.background = '#fee2e2';
-    formMessage.style.color = '#991b1b';
-    formMessage.style.borderLeftColor = '#dc2626';
-  }
-  
-  // Remove message after 5 seconds
-  setTimeout(() => {
-    formMessage.textContent = '';
-    formMessage.style.background = '';
-    formMessage.style.color = '';
-  }, 5000);
 }
 
 // ===========================
diff --git a/kontakt.html b/kontakt.html
index 8f02488..a2b736f 100644
--- a/kontakt.html
+++ b/kontakt.html
@@ -65,20 +65,32 @@
     <section>
       <h2>💬 Kontaktformular</h2>
       <p>Senden Sie uns eine Nachricht über das folgende Formular:</p>
-      <form id="contactForm">
-        <label for="name">Ihr Name *</label>
-        <input type="text" id="name" name="name" required>
+      <form id="contactForm" novalidate>
+        <div class="form-group">
+          <label for="name">Ihr Name *</label>
+          <input type="text" id="name" name="name" placeholder="z. B. Max Mustermann" autocomplete="name">
+          <span class="field-error" id="error-name"></span>
+        </div>
 
-        <label for="email">E-Mail-Adresse *</label>
-        <input type="email" id="email" name="email" required>
+        <div class="form-group">
+          <label for="email">E-Mail-Adresse *</label>
+          <input type="email" id="email" name="email" placeholder="z. B. max@beispiel.de" autocomplete="email">
+          <span class="field-error" id="error-email"></span>
+        </div>
 
-        <label for="subject">Betreff *</label>
-        <input type="text" id="subject" name="subject" required>
+        <div class="form-group">
+          <label for="subject">Betreff *</label>
+          <input type="text" id="subject" name="subject" placeholder="z. B. Frage zum Projekt">
+          <span class="field-error" id="error-subject"></span>
+        </div>
 
-        <label for="message">Nachricht *</label>
-        <textarea id="message" name="message" required></textarea>
+        <div class="form-group">
+          <label for="message">Nachricht *</label>
+          <textarea id="message" name="message" placeholder="Schreib uns gerne alles, was dich beschäftigt! 💬" rows="5"></textarea>
+          <span class="field-error" id="error-message"></span>
+        </div>
 
-        <button type="submit" class="btn">Nachricht senden</button>
+        <button type="submit" class="btn">Nachricht senden 💌</button>
       </form>
       <div id="formMessage"></div>
     </section>