diff --git a/eis_projekt.html b/eis_projekt.html
index a9ddf20..4f28ee9 100644
--- a/eis_projekt.html
+++ b/eis_projekt.html
@@ -1,18 +1,163 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <title>Eis Projekt</title>
-  <link rel="stylesheet" href="style.css">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<title>Projekt – Studienprojekt 2026</title>
+
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-  <header>
-    <h1>Eis Projekt 🍦</h1>
-  </header>
-  <main>
-    <p>Hier findest du Infos zu unserem Projekt.</p>
-    <a href="assets/projektinfo.pdf" target="_blank">Projektinfo öffnen</a>
-    <img src="img/pic2.jpg" alt="Bild 2">
-  </main>
+
+<nav>
+  <div class="nav-logo">🎓 Studienprojekt</div>
+
+  <ul class="nav-links">
+    <li><a href="index.html">Home</a></li>
+    <li><a href="ueberuns.html">Über uns</a></li>
+    <li><a href="eis_project.html">Projekt</a></li>
+    <li><a href="kontakt.html">Kontakt</a></li>
+    <li><a href="impressum.html">Impressum</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+
+  <div class="hero-content">
+
+    <div class="hero-tag">📚 Studienprojekt 2026</div>
+
+    <h1>
+      Unser <span>Projekt</span><br>
+      im Überblick
+    </h1>
+
+    <p>
+      Hier findest du die vollständige Dokumentation unseres Studienprojekts,
+      inklusive Zielsetzung, Ablauf, Methoden und Ergebnissen.
+    </p>
+
+    <div class="btn-group">
+      <a href="assets/projektinfo.pdf" target="_blank" class="btn-primary">
+        📄 PDF öffnen
+      </a>
+      <a href="#galerie" class="btn-ghost">
+        Zur Galerie →
+      </a>
+    </div>
+
+  </div>
+
+</section>
+
+<section>
+
+  <div class="section-label">Ziel</div>
+  <h2 class="section-title">Worum geht es?</h2>
+
+  <p class="section-sub">
+    Ziel des Studienprojekts ist die Verbindung von Mediengestaltung,
+    Forschung und praktischer Umsetzung. Dabei entstehen digitale Inhalte,
+    Konzepte und eine vollständige Dokumentation des Arbeitsprozesses.
+  </p>
+
+  <div class="stats-row">
+
+    <div class="stat-card">
+      <span class="stat-num">4</span>
+      <span class="stat-label">Projektphasen</span>
+    </div>
+
+    <div class="stat-card">
+      <span class="stat-num">2</span>
+      <span class="stat-label">Teammitglieder</span>
+    </div>
+
+    <div class="stat-card">
+      <span class="stat-num">2026</span>
+      <span class="stat-label">Durchführung</span>
+    </div>
+
+  </div>
+
+</section>
+
+<section id="galerie">
+
+  <div class="section-label">Prozess</div>
+  <h2 class="section-title">Projektverlauf</h2>
+
+  <p class="section-sub">
+    Von der ersten Idee bis zur finalen Umsetzung – so ist unser Projekt entstanden.
+  </p>
+
+  <div class="gallery-grid">
+
+    <div class="gallery-card tall">
+      <img src="img/pic1.jpg" alt="Ideenphase">
+
+      <div class="gallery-overlay">
+        <span class="gallery-overlay-text">Ideenphase</span>
+      </div>
+    </div>
+
+    <div class="gallery-col">
+
+      <div class="gallery-card">
+        <img src="img/pic2.jpg" alt="Planung">
+
+        <div class="gallery-overlay">
+          <span class="gallery-overlay-text">Planung</span>
+        </div>
+      </div>
+
+      <div class="gallery-card">
+        <img src="img/pic3.jpg" alt="Umsetzung">
+
+        <div class="gallery-overlay">
+          <span class="gallery-overlay-text">Umsetzung</span>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="gallery-card tall">
+      <img src="img/pic4.jpg" alt="Ergebnis">
+
+      <div class="gallery-overlay">
+        <span class="gallery-overlay-text">Ergebnis</span>
+      </div>
+    </div>
+
+  </div>
+
+</section>
+
+<section class="cta-section">
+
+  <div class="info-strip">
+
+    <div>
+      <h3>Projekt-Dokumentation</h3>
+      <p>
+        Alle Inhalte, Ergebnisse und Analysen findest du gesammelt in unserer PDF-Dokumentation.
+      </p>
+    </div>
+
+    <a href="assets/projektinfo.pdf" target="_blank" class="btn-white">
+      📄 Download
+    </a>
+
+  </div>
+
+</section>
+
+<footer>
+  © 2026 Studienprojekt · Anni & Lea · Projektseite
+</footer>
+
 </body>
-</html>
+</html>
\ No newline at end of file
