Erste Version der Website

2026-05-06 13:39:29 +00:00 · 2026-05-06 13:39:29 +00:00 · 9b04f70d01
commit 9b04f70d01
15 changed files with 1870 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+*.save
+*.swp
+*~
+.DS_Store
--- a/README.md
+++ b/README.md
@ -0,0 +1,181 @@
+# EIS Projekt – Entwicklung interaktiver Softwareanwendungen
+
+## 📋 Projektübersicht
+
+Dies ist eine mehrseitige Website für die Lehrveranstaltung **„Entwicklung interaktiver Softwareanwendungen"** an der PH Weingarten.
+
+**Dozenten:** Stefan Franke und Prof. Dr. Wolfgang Müller
+
+## 🚀 Live-Zugang
+
+Die Website ist unter folgender Adresse erreichbar:
+```
+https://isa##.edumake.de
+```
+(## wird durch Ihre Benutzernummer ersetzt)
+
+## 📁 Projektstruktur
+
+```
+~/public_html/
+├── index.html              # Startseite
+├── ueber_uns.html          # Über uns & Dozenten
+├── eis_projekt.html        # Projektdetails
+├── kontakt.html            # Kontaktformular
+├── impressum.html          # Rechtliche Infos
+├── css/
+│   └── style.css           # Zentrale Stylesheet
+├── js/
+│   └── script.js           # JavaScript für Interaktivität
+├── img/
+│   ├── logo.svg            # PH-Logo
+│   └── favicon.svg         # Browser-Icon
+├── assets/
+│   └── projektinfo.pdf     # Downloadbereich
+└── README.md               # Diese Datei
+```
+
+## 🛠️ Technologie-Stack
+
+### Frontend
+- **HTML5** – Semantisches Markup
+- **CSS3** – Responsive Design mit Grid & Flexbox
+- **JavaScript (ES6+)** – Interaktive Elemente
+  - Lightbox-Galerie
+  - Formularvalidierung
+  - Navigation-Highlighting
+
+### Features
+- ✅ Responsive Design (Mobile, Tablet, Desktop)
+- ✅ Einheitliche Navigation
+- ✅ Kontaktformular mit Validierung
+- ✅ Bildergalerie mit Lightbox
+- ✅ Download-Bereich
+- ✅ Impressum & rechtliche Hinweise
+- ✅ SEO-freundliches Markup
+
+## 🖥️ SSH-Zugang
+
+Verbindung zum Server:
+```bash
+ssh -p 2222 isa##@edumake.de
+```
+
+⚠️ **Wichtig:** Eduroam sperrt Port 2222 – verwenden Sie WLAN mbm oder Ihren mobilen Hotspot.
+
+Navigationszum Projektverzeichnis:
+```bash
+cd ~/public_html
+```
+
+## 📝 Dateienverwaltung
+
+### Dateien bearbeiten
+Verwenden Sie einen Editor (nano, vi) oder SFTP:
+```bash
+nano index.html
+```
+
+### Änderungen hochladen (via SFTP)
+```bash
+sftp -P 2222 isa##@edumake.de
+```
+
+## 🎨 CSS-Struktur
+
+Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
+
+1. **Global Styles & Reset** – Box-model, Basis-Styling
+2. **Typography** – Überschriften, Text, Links
+3. **Header & Navigation** – Sticky Header, aktive Links
+4. **Main Content** – Layout, Sections, Container
+5. **Forms** – Input-Styling, Validierung
+6. **Galerie & Lightbox** – Bilder und Modal-Fenster
+7. **Responsive Design** – Media Queries
+
+## 📱 Responsive Breakpoints
+
+```css
+/* Tablet */
+@media (max-width: 768px)
+
+/* Mobile */
+@media (max-width: 480px)
+```
+
+## 🔧 JavaScript-Funktionen
+
+### 1. Navigation-Highlighting
+- Automatisches Markieren des aktiven Links basierend auf URL
+
+### 2. Lightbox-Galerie
+- Klick auf Bilder öffnet eine vergrößerte Ansicht
+- ESC-Taste zum Schließen
+- Overlay-Klick zum Schließen
+
+### 3. Kontaktformular
+- Email-Validierung
+- Erfolgs-/Fehlermeldungen
+- Automatisches Zurücksetzen nach Absenden
+
+## 📚 Inhaltsseiten
+
+### index.html
+- Hero-Abschnitt mit Projekt-Übersicht
+- Info-Karten mit Links zu anderen Seiten
+- Updates-Liste
+
+### ueber_uns.html
+- Veranstaltungsinformationen
+- Dozenten-Profile
+- Projektstruktur (U1-U4+)
+
+### eis_projekt.html
+- Technologie-Stack
+- Projektstruktur
+- Design-Prinzipien
+- Deployment-Infos
+
+### kontakt.html
+- Kontaktinformationen
+- Kontaktformular
+- FAQ-Sektion
+
+### impressum.html
+- Rechtliche Hinweise
+- Datenschutzerklärung
+- Haftungsausschluss
+
+## 🚀 Entwicklungsschritte (Lernpfad)
+
+| Unit | Thema | Inhalte |
+|------|-------|---------|
+| **U1** | Grundlagen | SSH, Linux, erste HTML-Seite |
+| **U2** | Styling & Interaktion | CSS, JavaScript, Events |
+| **U3** | Website-Architektur | Navigation, mehrere Seiten (aktuell) |
+| **U4** | Backend-Integration | Python, Flask, APIs |
+| **U5+** | Erweitert | Datenbanken, Authentifizierung |
+
+## 🎯 Nächste Schritte
+
+- [ ] Logo durch echte PH-Weingarten-Logo ersetzen
+- [ ] Bilder hochladen und in Galerie einbinden
+- [ ] Backend mit Flask entwickeln (U4)
+- [ ] Formular-Backend-Integration
+- [ ] Datenbank-Verbindung
+- [ ] User-Authentifizierung
+
+## 📧 Support
+
+Bei Fragen oder Problemen kontaktieren Sie:
+
+- **Stefan Franke:** stefan.franke@ph-weingarten.de
+- **Prof. Dr. Wolfgang Müller:** wolfgang.mueller@ph-weingarten.de
+
+## 📄 Lizenz
+
+Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwecken.
+
+---
+
+**Zuletzt aktualisiert:** 22. April 2026
--- a/assets/projektinfo.pdf
+++ b/assets/projektinfo.pdf
@ -0,0 +1,66 @@
+%PDF-1.4
+1 0 obj
+<< /Type /Catalog /Pages 2 0 R >>
+endobj
+2 0 obj
+<< /Type /Pages /Kids [3 0 R] /Count 1 >>
+endobj
+3 0 obj
+<< /Type /Page /Parent 2 0 R /Resources 4 0 R /MediaBox [0 0 612 792] /Contents 5 0 R >>
+endobj
+4 0 obj
+<< /Font << /F1 << /Type /Font /Subtype /Type1 /BaseFont /Helvetica >> >> >>
+endobj
+5 0 obj
+<< /Length 500 >>
+stream
+BT
+/F1 24 Tf
+50 750 Td
+(Projektinfo - EIS) Tj
+ET
+BT
+/F1 12 Tf
+50 700 Td
+(Entwicklung interaktiver Softwareanwendungen) Tj
+ET
+BT
+/F1 12 Tf
+50 680 Td
+(PH Weingarten) Tj
+ET
+BT
+/F1 10 Tf
+50 650 Td
+(Diese Datei ist eine Platzhalter-PDF fuer das Projekt.) Tj
+ET
+BT
+/F1 10 Tf
+50 630 Td
+(Sie kann durch echte Projektdokumentationen ersetzt werden.) Tj
+ET
+BT
+/F1 10 Tf
+50 600 Td
+(Dozenten: Stefan Franke und Prof. Dr. Wolfgang Mueller) Tj
+ET
+BT
+/F1 10 Tf
+50 570 Td
+(Erstellt: 22. April 2026) Tj
+ET
+endstream
+endobj
+xref
+0 6
+0000000000 65535 f
+0000000009 00000 n
+0000000058 00000 n
+0000000115 00000 n
+0000000217 00000 n
+0000000323 00000 n
+trailer
+<< /Size 6 /Root 1 0 R >>
+startxref
+873
+%%EOF
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,696 @@
+/* ===========================
+   Global Styles & Reset
+   =========================== */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #6b3a5f;
+  line-height: 1.6;
+  background: linear-gradient(135deg, #fff5f9 0%, #ffe6f0 50%, #fff0f7 100%);
+  position: relative;
+  overflow-x: hidden;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Animated Background Flowers */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+}
+
+/* Blumen-Animation im Hintergrund */
+@keyframes float-flower {
+  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
+  50% { transform: translateY(-30px) rotate(5deg); opacity: 0.5; }
+}
+
+@keyframes drift {
+  0% { transform: translateX(0px); }
+  50% { transform: translateX(20px); }
+  100% { transform: translateX(0px); }
+}
+
+/* ===========================
+   Typography
+   =========================== */
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  color: #d946ef;
+}
+
+h1 {
+  font-size: 2.5rem;
+  color: #d946ef;
+  font-weight: 900;
+  letter-spacing: 2px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h2 {
+  font-size: 2rem;
+  color: #d946ef;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+h3 {
+  font-size: 1.5rem;
+  color: #ff1493;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+a {
+  color: #ff1493;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #ff69b4;
+  text-decoration: underline;
+}
+
+/* ===========================
+   Header & Navigation
+   =========================== */
+
+header {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 192, 203, 0.2) 100%);
+  border-bottom: 2px solid rgba(255, 105, 180, 0.3);
+  padding: 1.5rem 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 4px 20px rgba(255, 20, 147, 0.1);
+  backdrop-filter: blur(10px);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 700;
+  font-size: 1.3rem;
+  background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.logo img {
+  height: 50px;
+  width: auto;
+  filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.2));
+  animation: bounce-logo 2s ease-in-out infinite;
+}
+
+@keyframes bounce-logo {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.logo-text .institution {
+  font-size: 0.85rem;
+  color: #ff69b4;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
+}
+
+.logo-text .project {
+  font-size: 1rem;
+  background: linear-gradient(135deg, #ff1493 0%, #d946ef 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-rendering: optimizeLegibility;
+}
+
+nav {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+nav a {
+  color: #ff1493;
+  font-weight: 500;
+  padding: 0.5rem 0.75rem;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+  position: relative;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+nav a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #ff1493, #ff69b4);
+  transition: width 0.3s ease;
+}
+
+nav a:hover {
+  background: rgba(255, 105, 180, 0.1);
+  text-decoration: none;
+}
+
+nav a:hover::after {
+  width: 100%;
+}
+
+nav a.active {
+  background: linear-gradient(135deg, #ff1493, #ff69b4);
+  color: white;
+  text-decoration: none;
+  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ===========================
+   Main Content
+   =========================== */
+
+/* Main Content */
+main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+  min-height: calc(100vh - 200px);
+  position: relative;
+  z-index: 2;
+}
+
+/* ===========================
+   Sections & Content
+   =========================== */
+
+/* Sections & Content */
+
+section {
+  margin-bottom: 3rem;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 20px;
+  border: 2px solid rgba(255, 105, 180, 0.2);
+  box-shadow: 0 8px 32px rgba(255, 20, 147, 0.08);
+  backdrop-filter: blur(10px);
+  position: relative;
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+section::before {
+  content: '🌸';
+  position: absolute;
+  top: -20px;
+  right: 30px;
+  font-size: 2.5rem;
+  opacity: 0;
+  animation: float-flower 3s ease-in-out infinite;
+  animation-delay: 0s;
+}
+
+section:nth-child(even)::before {
+  content: '🌺';
+  animation-delay: 0.3s;
+}
+
+section:nth-child(3n)::before {
+  content: '🌷';
+  animation-delay: 0.6s;
+}
+
+section h2 {
+  margin-top: 0;
+}
+
+/* ===========================
+   Footer
+   =========================== */
+
+footer {
+  text-align: center;
+  padding: 2.5rem 1.5rem;
+  font-size: 0.9rem;
+  color: #ff69b4;
+  border-top: 2px solid rgba(255, 105, 180, 0.3);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 192, 203, 0.15) 100%);
+  margin-top: 4rem;
+  backdrop-filter: blur(10px);
+}
+
+footer p {
+  margin-bottom: 0.5rem;
+}
+
+.footer-links {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.footer-links a {
+  font-size: 0.85rem;
+}
+
+/* ===========================
+   Buttons & Links
+   =========================== */
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
+  color: white;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
+}
+
+.btn:hover {
+  background: linear-gradient(135deg, #ff69b4 0%, #ffc0cb 100%);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(255, 20, 147, 0.4);
+}
+
+.btn:active {
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: linear-gradient(135deg, #ffc0cb 0%, #ffe6f0 100%);
+  color: #d946ef;
+  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
+}
+
+.btn-secondary:hover {
+  background: linear-gradient(135deg, #ff69b4 0%, #ffc0cb 100%);
+  color: white;
+}
+
+.btn-download {
+  background: linear-gradient(135deg, #d946ef 0%, #ff1493 100%);
+  box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3);
+}
+
+.btn-download:hover {
+  background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
+}
+
+/* ===========================
+   Forms
+   =========================== */
+
+form {
+  max-width: 600px;
+  margin: 2rem 0;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #d946ef;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  border: 2px solid rgba(255, 105, 180, 0.3);
+  border-radius: 15px;
+  font-family: inherit;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #ff1493;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.15);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 150px;
+}
+
+/* ===========================
+   Galerie & Bilder
+   =========================== */
+
+.galerie {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+
+.galerie img {
+  width: 100%;
+  height: 250px;
+  object-fit: cover;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 3px solid rgba(255, 105, 180, 0.3);
+}
+
+.galerie img:hover {
+  transform: scale(1.08) rotate(2deg);
+  border-color: #ff1493;
+  box-shadow: 0 12px 28px rgba(255, 20, 147, 0.3);
+}
+
+/* ===========================
+   Lightbox Modal
+   =========================== */
+
+.lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 999;
+  animation: fadeIn 0.3s ease;
+}
+
+.lightbox-overlay img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  color: white;
+  font-size: 2rem;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.lightbox-close:hover {
+  color: #e2e8f0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ===========================
+   Download Links & Files
+   =========================== */
+
+.download-section {
+  background: linear-gradient(135deg, rgba(255, 192, 203, 0.2) 0%, rgba(255, 20, 147, 0.05) 100%);
+  border-left: 4px solid #ff1493;
+  padding: 1.5rem;
+  border-radius: 15px;
+  margin: 1.5rem 0;
+}
+
+.download-section p {
+  margin: 0.5rem 0;
+}
+
+/* ===========================
+   Impressum & Info
+   =========================== */
+
+.impressum-section {
+  font-size: 0.95rem;
+  line-height: 1.8;
+}
+
+.impressum-section h3 {
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+
+.impressum-section p {
+  margin-bottom: 0.5rem;
+}
+
+/* ===========================
+   Hero Section
+   =========================== */
+
+.hero {
+  background: linear-gradient(135deg, #ff1493 0%, #ff69b4 50%, #ffc0cb 100%);
+  color: white;
+  padding: 3rem 2rem;
+  border-radius: 25px;
+  margin-bottom: 2rem;
+  text-align: center;
+  box-shadow: 0 12px 40px rgba(255, 20, 147, 0.25);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '🌸 🌺 🌷';
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  font-size: 2rem;
+  opacity: 0.4;
+  animation: float-flower 4s ease-in-out infinite;
+}
+
+.hero h1 {
+  color: white;
+  margin-top: 0;
+  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: 10;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 900;
+  font-size: 2.8rem;
+  letter-spacing: 1px;
+}
+
+.hero p {
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+  color: rgba(255, 255, 255, 0.95);
+  position: relative;
+  z-index: 10;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ===========================
+   Info Cards
+   =========================== */
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+
+.card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 247, 0.8) 100%);
+  border: 2px solid rgba(255, 105, 180, 0.2);
+  border-radius: 20px;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 20px rgba(255, 20, 147, 0.1);
+  position: relative;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: 20px;
+  font-size: 2rem;
+  opacity: 0.2;
+}
+
+.card:nth-child(1)::before { content: '🌸'; }
+.card:nth-child(2)::before { content: '🌺'; }
+.card:nth-child(3)::before { content: '🌷'; }
+
+.card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 16px 36px rgba(255, 20, 147, 0.25);
+  border-color: #ff1493;
+}
+
+.card h3 {
+  margin-top: 0;
+  color: #d946ef;
+}
+
+/* ===========================
+   Responsive Design
+   =========================== */
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  .header-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  nav {
+    width: 100%;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  nav a {
+    display: block;
+    padding: 0.5rem;
+  }
+
+  section {
+    padding: 1.5rem;
+  }
+
+  .hero {
+    padding: 2rem 1.5rem;
+  }
+
+  .galerie {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+  }
+
+  header {
+    padding: 1rem;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  section {
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .galerie {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .galerie img {
+    height: 200px;
+  }
+}
--- a/eis_projekt.html
+++ b/eis_projekt.html
@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Das EIS-Projekt - Interaktive Softwareanwendungen">
+  <title>Das Projekt – EIS</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <div class="logo">
+        <img src="img/logo.png" alt="Logo">
+        <div class="logo-text">
+          <span class="institution">David & Karo</span>
+          <span class="project">EIS Projekt</span>
+        </div>
+      </div>
+      <nav>
+        <a href="index.html">Start</a>
+        <a href="ueber_uns.html">Über uns</a>
+        <a href="eis_projekt.html" class="active">Projekt</a>
+        <a href="galerie.html">Galerie</a>
+        <a href="kontakt.html">Kontakt</a>
+        <a href="impressum.html">Impressum</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>Das EIS-Projekt</h1>
+      <p>Innovative Webentwicklung mit modernem Tech-Stack & magischem Design ✨</p>
+    </section>
+
+    <section>
+      <h2>💻 Technologie-Stack</h2>
+      <div class="cards">
+        <div class="card">
+          <h3>Frontend</h3>
+          <ul>
+            <li>HTML5</li>
+            <li>CSS3 (Responsive Design)</li>
+            <li>JavaScript (ES6+)</li>
+            <li>DOM-Manipulation</li>
+          </ul>
+        </div>
+        <div class="card">
+          <h3>Backend</h3>
+          <ul>
+            <li>Python 3</li>
+            <li>Flask</li>
+            <li>RESTful APIs</li>
+            <li>SQL-Datenbanken</li>
+          </ul>
+        </div>
+        <div class="card">
+          <h3>Infrastruktur</h3>
+          <ul>
+            <li>Linux Server (Ubuntu)</li>
+            <li>SSH-Zugang</li>
+            <li>Dateiserver (public_html)</li>
+            <li>SFTP/SCP</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>📁 Projektstruktur</h2>
+      <p>Die Website folgt einer klaren, wartbaren Verzeichnisstruktur:</p>
+      <pre><code>~/public_html/
+├── index.html
+├── kontakt.html
+├── ueber_uns.html
+├── eis_projekt.html
+├── impressum.html
+├── css/
+│   └── style.css
+├── js/
+│   └── script.js
+├── img/
+│   ├── logo.svg
+│   └── favicon.png
+└── assets/
+    └── projektinfo.pdf</code></pre>
+    </section>
+
+    <section>
+      <h2>🎨 Design-Prinzipien</h2>
+      <ul>
+        <li><strong>Responsives Design:</strong> Optimiert für Mobile, Tablet und Desktop</li>
+        <li><strong>Semantisches HTML:</strong> Barrierefreiheit und SEO</li>
+        <li><strong>Clean Code:</strong> Lesbare und wartbare Struktur</li>
+        <li><strong>Konsistentes Styling:</strong> Zentralisierte CSS-Verwaltung</li>
+        <li><strong>User Experience:</strong> Interaktive Elemente und angenehme Navigation</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>⚙️ Funktionen</h2>
+      <div class="cards">
+        <div class="card">
+          <h3>Navigation</h3>
+          <p>Einheitliche Navigation auf allen Seiten mit aktiv-Zustand</p>
+        </div>
+        <div class="card">
+          <h3>Responsive Layout</h3>
+          <p>CSS Grid und Flexbox für flexible Layouts auf allen Geräten</p>
+        </div>
+        <div class="card">
+          <h3>Lightbox-Galerie</h3>
+          <p>Interaktive Bildergalerie mit Modal-Ansicht (JavaScript)</p>
+        </div>
+        <div class="card">
+          <h3>Kontaktformular</h3>
+          <p>Frontend-Validierung und Backend-Integration (kommend)</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>🌐 Deployment</h2>
+      <p>Die Website ist live unter:</p>
+      <div class="download-section">
+        <p><strong>Live-URL:</strong> isa##.edumake.de</p>
+        <p><em>(## wird durch die Benutzernummer ersetzt)</em></p>
+      </div>
+      <p>Alle Änderungen im Verzeichnis sind sofort live – so geht moderne Web-Entwicklung! 🚀</p>
+    </section>
+
+    <section>
+      <h2>📝 Projektressourcen</h2>
+      <p>Folgende Materialien unterstützen die Entwicklung:</p>
+      <div class="download-section">
+        <a href="assets/projektinfo.pdf" download class="btn btn-download">📄 Projektinfo herunterladen (PDF)</a>
+      </div>
+    </section>
+
+    <section>
+      <h2>🚀 Entwicklungsschritte</h2>
+      <ol>
+        <li><strong>U1:</strong> Website-Struktur und erste HTML-Seite</li>
+        <li><strong>U2:</strong> Styling mit CSS und interaktive JavaScript-Elemente</li>
+        <li><strong>U3:</strong> Mehrseitige Website mit Navigation und Inhaltsstruktur (aktuell)</li>
+        <li><strong>U4:</strong> Backend mit Python und Flask hinzufügen</li>
+        <li><strong>U5+:</strong> Datenbankanbindung, APIs, erweiterte Funktionen</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>📸 Bildergalerie</h2>
+      <p>Hier können später Screenshots und Bilder des Projekts eingefügt werden:</p>
+      <div class="galerie">
+        <!-- Bilder werden hier eingefügt, wenn verfügbar -->
+        <p style="grid-column: 1 / -1; color: #64748b;">Bildergalerie wird nach dem Hochladen von Bildern gefüllt.</p>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 – Made with 💕 & ✨ – David & Karo</p>
+    <div class="footer-links">
+      <a href="impressum.html">Impressum</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="#">Datenschutz</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/galerie.html
+++ b/galerie.html
@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Galerie - David & Karo Projekt">
+  <title>Galerie – EIS Projekt</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <div class="logo">
+        <img src="img/logo.png" alt="Logo">
+        <div class="logo-text">
+          <span class="institution">David & Karo</span>
+          <span class="project">EIS Projekt</span>
+        </div>
+      </div>
+      <nav>
+        <a href="index.html">Start</a>
+        <a href="ueber_uns.html">Über uns</a>
+        <a href="eis_projekt.html">Projekt</a>
+        <a href="galerie.html" class="active">Galerie</a>
+        <a href="kontakt.html">Kontakt</a>
+        <a href="impressum.html">Impressum</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>📸 Galerie</h1>
+      <p>Einblicke in unser Projekt – Bilder, Screenshots & Behind-the-Scenes 🌸</p>
+    </section>
+
+    <section>
+      <h2>🖼️ Unser Team</h2>
+      <p>Hier findet ihr Bilder aus unserem Team und vom Projekt:</p>
+      <div class="galerie">
+        <img src="img/gruppenbild.jpg" alt="Team David & Karo" title="Klick zum Vergrößern">
+      </div>
+    </section>
+
+    <section>
+      <h2>📱 Projekt Screenshots</h2>
+      <p>Verschiedene Ansichten und Details des Projekts:</p>
+      <div class="galerie">
+        <!-- Screenshots können hier eingefügt werden, wenn vorhanden -->
+        <p style="grid-column: 1 / -1; color: #64748b; text-align: center;">Screenshots werden hier angezeigt, wenn verfügbar 📸</p>
+      </div>
+    </section>
+
+    <section>
+      <h2>🎨 Design-Inspiration</h2>
+      <p>Die Ästhetik hinter unserem Projekt – Rosa, Pink, Blumen & Gen Z Vibes:</p>
+      <div class="galerie">
+        <!-- Design-Referenzen können hier eingefügt werden -->
+        <p style="grid-column: 1 / -1; color: #64748b; text-align: center;">Design-Inspirationen kommen bald! 🌸✨</p>
+      </div>
+    </section>
+
+    <section>
+      <h2>💾 Downloads</h2>
+      <p>Wichtige Dateien und Dokumente zum Projekt:</p>
+      <div class="download-section">
+        <h3>📄 Projektinformationen</h3>
+        <p><a href="assets/projektinfo.pdf" download class="btn btn-download">📥 projektinfo.pdf herunterladen</a></p>
+        <p style="font-size: 0.9rem; color: #64748b; margin-top: 1rem;">PDF mit allen wichtigen Projektdetails, Struktur und Informationen</p>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 – Made with 💕 & ✨ – David & Karo</p>
+    <div class="footer-links">
+      <a href="impressum.html">Impressum</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="#">Datenschutz</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/img/favicon.svg
+++ b/img/favicon.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#1e40af" rx="4"/>
+  <text x="16" y="24" font-size="20" font-weight="bold" fill="white" text-anchor="middle" font-family="Arial">E</text>
+</svg>
--- a/img/gruppenbild.jpg
+++ b/img/gruppenbild.jpg
@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+  <!-- Gradient Background -->
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff69b4;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#ffc0cb;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <rect width="800" height="600" fill="url(#grad)"/>
+  
+  <!-- Title -->
+  <text x="400" y="250" font-size="60" font-weight="bold" text-anchor="middle" fill="white" font-family="Arial">
+    David & Karo
+  </text>
+  
+  <!-- Subtitle -->
+  <text x="400" y="320" font-size="36" text-anchor="middle" fill="white" font-family="Arial">
+    🌸 Team Projekt 🌸
+  </text>
+  
+  <!-- Flowers -->
+  <text x="150" y="150" font-size="80">🌸</text>
+  <text x="650" y="150" font-size="80">🌺</text>
+  <text x="100" y="500" font-size="80">🌷</text>
+  <text x="700" y="500" font-size="80">🌼</text>
+</svg>
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/logo.svg
+++ b/img/logo.svg
@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <!-- Background circle -->
+  <circle cx="50" cy="50" r="48" fill="#1e40af" opacity="0.1" stroke="#1e40af" stroke-width="2"/>
+  
+  <!-- University building/icon -->
+  <g transform="translate(50, 50)">
+    <!-- Main building shape -->
+    <rect x="-25" y="-15" width="50" height="30" fill="#1e40af"/>
+    
+    <!-- Roof -->
+    <polygon points="-25,-15 0,-30 25,-15" fill="#2563eb"/>
+    
+    <!-- Door -->
+    <rect x="-8" y="5" width="16" height="20" fill="#fbbf24"/>
+    <circle cx="-2" cy="15" r="2" fill="#1e40af"/>
+    
+    <!-- Windows left -->
+    <rect x="-18" y="-8" width="6" height="6" fill="#93c5fd"/>
+    <rect x="-18" y="2" width="6" height="6" fill="#93c5fd"/>
+    
+    <!-- Windows right -->
+    <rect x="12" y="-8" width="6" height="6" fill="#93c5fd"/>
+    <rect x="12" y="2" width="6" height="6" fill="#93c5fd"/>
+    
+    <!-- Flag pole -->
+    <rect x="0" y="-28" width="2" height="10" fill="#64748b"/>
+    <!-- Flag -->
+    <rect x="2" y="-27" width="8" height="5" fill="#2563eb"/>
+  </g>
+</svg>
--- a/impressum.html
+++ b/impressum.html
@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Impressum - Entwicklung interaktiver Softwareanwendungen">
+  <title>Impressum – EIS Projekt</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <div class="logo">
+        <img src="img/logo.png" alt="Logo">
+        <div class="logo-text">
+          <span class="institution">David & Karo</span>
+          <span class="project">EIS Projekt</span>
+        </div>
+      </div>
+      <nav>
+        <a href="index.html">Start</a>
+        <a href="ueber_uns.html">Über uns</a>
+        <a href="eis_projekt.html">Projekt</a>
+        <a href="galerie.html">Galerie</a>
+        <a href="kontakt.html">Kontakt</a>
+        <a href="impressum.html" class="active">Impressum</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>Impressum</h1>
+      <p>Die rechtlichen Infos – kurz und knapp 📋</p>
+    </section>
+
+    <section class="impressum-section">
+      <h2>Angaben gemäß § 5 TMG</h2>
+      <h3>Verantwortlich für den Inhalt</h3>
+      <p>
+        <strong>David & Karo</strong><br>
+        EIS Projekt
+      </p>
+
+      <h3>Projektleitung & Inhaltsverantwortung</h3>
+      <p>
+        <strong>David</strong><br>
+        Email: <a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a>
+      </p>
+      <p>
+        <strong>Karo</strong><br>
+        Email: <a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a>
+      </p>
+
+      <h3>Über das Projekt</h3>
+      <p>
+        Diese Website ist unser persönliches Projekt – ein Showcase für innovative Webentwicklung 
+        mit modernen Technologien. Hier zeigen wir, was wir können und bauen coole digitale Lösungen.
+      </p>
+
+      <h3>Haftungsausschluss</h3>
+      <p>
+        Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. 
+        Allerdings können keine Garantien für die Vollständigkeit, Richtigkeit und Aktualität 
+        dieser Inhalte übernommen werden. Die Nutzung der bereitgestellten Informationen erfolgt 
+        auf eigenes Risiko.
+      </p>
+
+      <h3>Urheberrecht</h3>
+      <p>
+        Die auf dieser Website präsentierten Inhalte und Werke sind urheberrechtlich geschützt. 
+        Vervielfältigungen, Bearbeitungen, Verbreitungen und jede Art der Verwertung außerhalb 
+        der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung der Autoren.
+      </p>
+
+      <h3>Links zu externen Websites</h3>
+      <p>
+        Diese Website enthält Links zu externen Websites. Da wir für die Inhalte dieser 
+        Websites nicht verantwortlich sind, verweisen wir auf die Haftungsausschlüsse der 
+        Betreiber. Der Verweis auf fremde Websites gilt nicht als Billigung deren Inhalte.
+      </p>
+
+      <h3>Datenschutz</h3>
+      <p>
+        Die Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener Daten möglich. 
+        Soweit personenbezogene Daten erhoben werden, erfolgt dies auf freiwilliger Basis. 
+        Diese Daten werden nicht an Dritte weitergegeben.
+      </p>
+
+      <h3>Kontakt bei Fragen</h3>
+      <p>
+        Bei Fragen oder Anliegen erreicht ihr uns unter:<br>
+        <a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a> oder 
+        <a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a>
+      </p>
+
+      <h3>Zuletzt aktualisiert</h3>
+      <p>
+        <strong>22. April 2026</strong>
+      </p>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 – Made with 💕 & ✨ – David & Karo</p>
+    <div class="footer-links">
+      <a href="impressum.html">Impressum</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="#">Datenschutz</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Entwicklung interaktiver Softwareanwendungen - David & Karo">
+  <title>Startseite – EIS Projekt</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <div class="logo">
+        <img src="img/logo.png" alt="Logo">
+        <div class="logo-text">
+          <span class="institution">David & Karo</span>
+          <span class="project">EIS Projekt</span>
+        </div>
+      </div>
+      <nav>
+        <a href="index.html" class="active">Start</a>
+        <a href="ueber_uns.html">Über uns</a>
+        <a href="eis_projekt.html">Projekt</a>
+        <a href="galerie.html">Galerie</a>
+        <a href="kontakt.html">Kontakt</a>
+        <a href="impressum.html">Impressum</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>✨ Entwicklung interaktiver Softwareanwendungen ✨</h1>
+      <p>🌸 Ein Projekt von David & Karo – interaktiv, kreativ, magisch 🌸</p>
+    </section>
+
+    <section>
+      <h2>💕 Willkommen! 👋</h2>
+      <p>Willkommen in unserem interaktiven Projekt! Hier kreieren wir coole Softwareanwendungen und haben dabei mega viel Spaß.</p>
+      <p>Bereit für was Geniales? Let's go! 💅✨</p>
+    </section>
+
+    <section>
+      <h2>🌹 Projekt-Übersicht 🌹</h2>
+      <div class="cards">
+        <div class="card">
+          <h3>📚 Über uns</h3>
+          <p>Lernen Sie die Dozenten und das Projekt kennen. Ein Überblick über Ziele und Inhalte – stay updated! ✨</p>
+          <a href="ueber_uns.html" class="btn">Mehr erfahren</a>
+        </div>
+        <div class="card">
+          <h3>💻 Das EIS-Projekt</h3>
+          <p>Entdecken Sie die technischen Details und Implementierungsmagic. Wir bauen was Geniales! 🚀</p>
+          <a href="eis_projekt.html" class="btn">Zum Projekt</a>
+        </div>
+        <div class="card">
+          <h3>📧 Kontakt</h3>
+          <p>Fragen? Feedback? Wir freuen uns immer auf eure Messages – hit us up! 💕</p>
+          <a href="kontakt.html" class="btn btn-secondary">Schreiben Sie uns</a>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>🌺 Letzte Updates 🌺</h2>
+      <ul>
+        <li><strong>22.04.2026:</strong> Website mit Rosa/Pink-Design & Blumen-Vibes launched! 🌸✨</li>
+        <li><strong>22.04.2026:</strong> Gen Z-freundliche Navigation & Animationen implemented 💅</li>
+        <li><strong>22.04.2026:</strong> Alle Seiten ready to go – check them out! 🚀</li>
+      </ul>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 – Made with 💕 & ✨ – David & Karo</p>
+    <div class="footer-links">
+      <a href="impressum.html">Impressum</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="#">Datenschutz</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
+
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,178 @@
+// ===========================
+// Active Navigation Highlighting
+// ===========================
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Highlight active navigation link
+  const currentLocation = location.pathname.split('/').pop() || 'index.html';
+  const navLinks = document.querySelectorAll('nav a');
+  
+  navLinks.forEach(link => {
+    const href = link.getAttribute('href');
+    if (href === currentLocation) {
+      link.classList.add('active');
+    } else {
+      link.classList.remove('active');
+    }
+  });
+
+  // Initialize lightbox gallery
+  initializeLightbox();
+
+  // Initialize contact form
+  initializeContactForm();
+});
+
+// ===========================
+// Lightbox Gallery
+// ===========================
+
+function initializeLightbox() {
+  const galleryImages = document.querySelectorAll('.galerie img');
+  
+  galleryImages.forEach(img => {
+    img.addEventListener('click', function() {
+      openLightbox(this.src);
+    });
+  });
+}
+
+function openLightbox(imageSrc) {
+  // Create overlay
+  const overlay = document.createElement('div');
+  overlay.className = 'lightbox-overlay';
+  
+  // Create image container
+  const imgContainer = document.createElement('div');
+  imgContainer.style.position = 'relative';
+  
+  // Create close button
+  const closeBtn = document.createElement('span');
+  closeBtn.className = 'lightbox-close';
+  closeBtn.innerHTML = '&times;';
+  closeBtn.addEventListener('click', function(e) {
+    e.stopPropagation();
+    overlay.remove();
+  });
+  
+  // Create large image
+  const img = document.createElement('img');
+  img.src = imageSrc;
+  
+  imgContainer.appendChild(closeBtn);
+  imgContainer.appendChild(img);
+  overlay.appendChild(imgContainer);
+  
+  // Close on overlay click
+  overlay.addEventListener('click', function() {
+    overlay.remove();
+  });
+  
+  // Close on Escape key
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      overlay.remove();
+    }
+  });
+  
+  document.body.appendChild(overlay);
+}
+
+// ===========================
+// Contact Form Handling
+// ===========================
+
+function initializeContactForm() {
+  const form = document.getElementById('contactForm');
+  const formMessage = document.getElementById('formMessage');
+  
+  if (!form) return;
+  
+  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 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;
+    }
+    
+    // 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;
+    }
+    
+    // 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
+    form.reset();
+    
+    console.log('Form data:', { name, email, subject, message });
+  });
+}
+
+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);
+}
+
+// ===========================
+// Smooth Scroll (Progressive Enhancement)
+// ===========================
+
+document.addEventListener('click', function(e) {
+  if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) {
+    e.preventDefault();
+    const targetId = e.target.getAttribute('href').substring(1);
+    const targetElement = document.getElementById(targetId);
+    
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+});
+
+// ===========================
+// Utility: Log
+// ===========================
+
+console.log('✅ EIS Website erfolgreich geladen!');
+console.log('📚 Veranstaltung: Entwicklung interaktiver Softwareanwendungen');
+console.log('🏫 Institution: PH Weingarten');
+console.log('👨‍🏫 Dozenten: Stefan Franke und Prof. Dr. Wolfgang Müller');
--- a/kontakt.html
+++ b/kontakt.html
@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Kontakt - Entwicklung interaktiver Softwareanwendungen">
+  <title>Kontakt – EIS Projekt</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <div class="logo">
+        <img src="img/logo.png" alt="Logo">
+        <div class="logo-text">
+          <span class="institution">David & Karo</span>
+          <span class="project">EIS Projekt</span>
+        </div>
+      </div>
+      <nav>
+        <a href="index.html">Start</a>
+        <a href="ueber_uns.html">Über uns</a>
+        <a href="eis_projekt.html">Projekt</a>
+        <a href="galerie.html">Galerie</a>
+        <a href="kontakt.html" class="active">Kontakt</a>
+        <a href="impressum.html">Impressum</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>Kontakt</h1>
+      <p>Sag Bescheid! Wir freuen uns auf deine Nachricht! 💌</p>
+    </section>
+
+    <section>
+      <h2>📧 Kontaktinfos</h2>
+      <div class="cards">
+        <div class="card">
+          <h3>David</h3>
+          <p><strong>Email:</strong> <a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a></p>
+          <p><strong>Vibe:</strong> Full-Stack Magic ✨</p>
+        </div>
+        <div class="card">
+          <h3>Karo</h3>
+          <p><strong>Email:</strong> <a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a></p>
+          <p><strong>Vibe:</strong> Creative Developer 💫</p>
+        </div>
+      </div>
+    </section>
+
+    <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>
+
+        <label for="email">E-Mail-Adresse *</label>
+        <input type="email" id="email" name="email" required>
+
+        <label for="subject">Betreff *</label>
+        <input type="text" id="subject" name="subject" required>
+
+        <label for="message">Nachricht *</label>
+        <textarea id="message" name="message" required></textarea>
+
+        <button type="submit" class="btn">Nachricht senden</button>
+      </form>
+      <div id="formMessage"></div>
+    </section>
+
+    <section>
+      <h2>📍 Wo ihr uns findet</h2>
+      <p>Wir sind meistens im Web zu finden, aber auch gerne bereit für Meetings in der echten Welt! 🌍</p>
+      <p>
+        <strong>Online-Vibes:</strong><br>
+        Discord, Telegram, oder einfach eine DM 💬
+      </p>
+    </section>
+
+    <section>
+      <h2>❓ Fragen?</h2>
+      <div class="cards">
+        <div class="card">
+          <h3>🎨 Design-Fragen</h3>
+          <p>Karo hat immer ein offenes Ohr für deine kreativen Ideen!</p>
+        </div>
+        <div class="card">
+          <h3>💻 Tech-Fragen</h3>
+          <p>David kann dir helfen, wenn es um Code und Technik geht!</p>
+        </div>
+        <div class="card">
+          <h3>🤝 Kooperationen</h3>
+          <p>Lass uns zusammenarbeiten! Wir lieben neue Projekte! 🚀</p>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 – Made with 💕 & ✨ – David & Karo</p>
+    <div class="footer-links">
+      <a href="impressum.html">Impressum</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="#">Datenschutz</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/ueber_uns.html
+++ b/ueber_uns.html
@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Über uns - Entwicklung interaktiver Softwareanwendungen">
+  <title>Über uns – EIS Projekt</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <div class="logo">
+        <img src="img/logo.png" alt="Logo">
+        <div class="logo-text">
+          <span class="institution">David & Karo</span>
+          <span class="project">EIS Projekt</span>
+        </div>
+      </div>
+      <nav>
+        <a href="index.html">Start</a>
+        <a href="ueber_uns.html" class="active">Über uns</a>
+        <a href="eis_projekt.html">Projekt</a>
+        <a href="galerie.html">Galerie</a>
+        <a href="kontakt.html">Kontakt</a>
+        <a href="impressum.html">Impressum</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <h1>Über uns</h1>
+      <p>David & Karo – zwei kreative Köpfe, ein großes Projekt 💕</p>
+    </section>
+
+    <section>
+      <h2>💡 Das Projekt</h2>
+      <p><strong>Entwicklung interaktiver Softwareanwendungen</strong> – das ist unser ding! Wir bauen innovative digitale Lösungen mit modernen Technologien.</p>
+      <p>Unser Fokus:</p>
+      <ul>
+        <li>💻 Frontend-Magie mit HTML, CSS und JavaScript</li>
+        <li>📱 Responsive & mobile-first Design</li>
+        <li>⚡ Interaktive User Experiences</li>
+        <li>🚀 Backend-Power mit Python & Co.</li>
+        <li>🎯 Clean Code & Best Practices</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>👯‍♀️ Wer wir sind</h2>
+      <div class="cards">
+        <div class="card">
+          <h3>David</h3>
+          <p>Full-Stack Developer mit Leidenschaft für coole Interfaces und saubere Code-Architektur.</p>
+          <p><strong>Skills:</strong> JavaScript, Python, Design</p>
+        </div>
+        <div class="card">
+          <h3>Karo</h3>
+          <p>Creative Developer, die Kreativität mit Technik verbindet und magische Momente schafft.</p>
+          <p><strong>Skills:</strong> UX/UI, Frontend, Animation</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>🚀 Projektstruktur</h2>
+      <p>Unser Projekt wächst in mehreren Phasen:</p>
+      <div class="cards">
+        <div class="card">
+          <h3>Phase 1: Foundation</h3>
+          <p>Solide Basis mit HTML, CSS und erste JavaScript-Interaktionen</p>
+        </div>
+        <div class="card">
+          <h3>Phase 2: Styling & Magic</h3>
+          <p>Design-Verfeinerung, Animationen und coolere JS-Features</p>
+        </div>
+        <div class="card">
+          <h3>Phase 3: Full Stack</h3>
+          <p>Backend-Integration mit Python und Datenbanken</p>
+        </div>
+        <div class="card">
+          <h3>Phase 4+: Advanced</h3>
+          <p>APIs, Authentifizierung, erweiterte Funktionen</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>💡 Vision</h2>
+      <p>Wir glauben an innovativen Code, durchdachtes Design und die Kraft von Technologie, um Ideen zum Leben zu erwecken. Unser Ziel: Websites und Apps, die nicht nur funktionieren, sondern auch die User zum Lächeln bringen.</p>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 – Made with 💕 & ✨ – David & Karo</p>
+    <div class="footer-links">
+      <a href="impressum.html">Impressum</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="#">Datenschutz</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>