Resolve merge conflict in kontakt.html

css/notenrechner-dom.css

@@ -0,0 +1,201 @@
+/* ====================== GRADE CALCULATOR DOM STYLES ====================== */
+
+.grade-form {
+  background: #f5f5f5;
+  padding: 2rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-input.error {
+  border-color: #ef4444;
+  background-color: #fee2e2;
+}
+
+.error-message {
+  display: block;
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  font-weight: 500;
+}
+
+#calculateBtn {
+  width: 100%;
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+#calculateBtn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+#calculateBtn:active {
+  transform: translateY(0);
+}
+
+/* Result Container */
+.result-container {
+  background: linear-gradient(135deg, #f0f4ff 0%, #f5f0ff 100%);
+  padding: 2rem;
+  border-radius: 8px;
+  border-left: 4px solid #667eea;
+}
+
+.result-container h3 {
+  color: #1e293b;
+  margin-bottom: 1rem;
+}
+
+#resultText {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 1.5rem;
+}
+
+/* Progress Bar */
+.progress-bar-container {
+  width: 100%;
+  height: 30px;
+  background: #e2e8f0;
+  border-radius: 15px;
+  overflow: hidden;
+  margin: 1rem 0;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
+  border-radius: 15px;
+  transition: width 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.5rem;
+  color: white;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.progress-bar.ausreichend {
+  background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%);
+}
+
+.progress-bar.befriedigend {
+  background: linear-gradient(90deg, #f97316 0%, #d97706 100%);
+}
+
+.progress-bar.nicht-bestanden {
+  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
+}
+
+.percentage-text {
+  color: #666;
+  font-size: 0.9rem;
+  margin-top: 1rem;
+  text-align: center;
+}
+
+/* Dark Mode Adjustments */
+body.dark .grade-form {
+  background: #2d3748;
+}
+
+body.dark .form-group label {
+  color: #e2e8f0;
+}
+
+body.dark .form-input {
+  background: #1a202c;
+  color: #e2e8f0;
+  border-color: #4a5568;
+}
+
+body.dark .form-input:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+body.dark .form-input.error {
+  background: #742a2a;
+  border-color: #ef4444;
+}
+
+body.dark .error-message {
+  color: #fca5a5;
+}
+
+body.dark .result-container {
+  background: linear-gradient(135deg, #1e3a4d 0%, #2a1f4d 100%);
+  border-left-color: #667eea;
+}
+
+body.dark .result-container h3 {
+  color: #e2e8f0;
+}
+
+body.dark #resultText {
+  color: #e2e8f0;
+}
+
+body.dark .progress-bar-container {
+  background: #4a5568;
+}
+
+body.dark .percentage-text {
+  color: #a0aec0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .grade-form {
+    padding: 1.5rem;
+  }
+
+  .result-container {
+    padding: 1.5rem;
+  }
+
+  #resultText {
+    font-size: 1.1rem;
+  }
+
+  .progress-bar-container {
+    height: 25px;
+  }
+}

css/style.css

@@ -70,6 +70,19 @@ header {
   align-items: center;
 }
 
+.nav-menu li {
+  position: relative;
+}
+
+/* Dropdown menu styles */
+.nav-menu li ul {
+  display: none;
+}
+
+.nav-menu li:hover ul {
+  display: block;
+}
+
 .nav-menu a {
   text-decoration: none;
   color: rgba(255, 255, 255, 0.9);
@@ -860,4 +873,332 @@ footer {
 
 .galerie img:hover {
   transform: scale(1.05);
+}
+
+/* ====================== DARK MODE ====================== */
+
+#dark-mode-toggle {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  padding: 0.6rem 1.2rem;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
+}
+
+#dark-mode-toggle:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: white;
+}
+
+body.dark {
+  background-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark header {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+}
+
+body.dark .nav-menu a {
+  color: rgba(226, 232, 240, 0.8);
+}
+
+body.dark .nav-menu a:hover {
+  background: rgba(226, 232, 240, 0.1);
+  color: white;
+}
+
+body.dark .nav-menu a.active {
+  background: rgba(102, 126, 234, 0.3);
+}
+
+body.dark nav {
+  border-color: #334155;
+}
+
+body.dark a {
+  color: #60a5fa;
+}
+
+body.dark a:hover {
+  color: #93c5fd;
+}
+
+body.dark main {
+  background-color: #1e293b;
+}
+
+body.dark .hero {
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.5) 100%);
+}
+
+body.dark .hero h1 {
+  color: #e2e8f0;
+}
+
+body.dark .hero p {
+  color: #a0aec0;
+}
+
+body.dark .page-header {
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
+  border-left-color: #667eea;
+}
+
+body.dark .page-header h1 {
+  color: #e2e8f0;
+}
+
+body.dark .page-header p {
+  color: #cbd5e1;
+}
+
+body.dark .content-section {
+  background: #334155;
+  color: #e2e8f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .content-section h2 {
+  color: #e2e8f0;
+  border-bottom-color: #667eea;
+}
+
+body.dark .content-section h3 {
+  color: #cbd5e1;
+}
+
+body.dark .content-section p {
+  color: #a0aec0;
+}
+
+body.dark .content-section li {
+  color: #a0aec0;
+}
+
+body.dark .feature-card {
+  background: linear-gradient(135deg, #2d3e5f 0%, #1e3a4d 100%);
+  border-left-color: #667eea;
+}
+
+body.dark .feature-card h3 {
+  color: #60a5fa;
+}
+
+body.dark .feature-card p {
+  color: #a0aec0;
+}
+
+body.dark .btn {
+  color: white;
+}
+
+body.dark .btn-primary {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+}
+
+body.dark .btn-secondary {
+  background: #334155;
+  color: #60a5fa;
+  border-color: #667eea;
+}
+
+body.dark .btn-secondary:hover {
+  background: #475569;
+}
+
+body.dark .cta-section {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+}
+
+body.dark .cta-section h2 {
+  color: white;
+}
+
+body.dark .tech-card {
+  background: #334155;
+  border-color: #475569;
+}
+
+body.dark .tech-card:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+}
+
+body.dark .tech-card h3 {
+  color: #60a5fa;
+}
+
+body.dark .tech-card li {
+  color: #a0aec0;
+}
+
+body.dark .team-member {
+  background: #334155;
+  border-color: #475569;
+}
+
+body.dark .team-member:hover {
+  border-color: #667eea;
+  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
+}
+
+body.dark .team-member h3 {
+  color: #60a5fa;
+}
+
+body.dark .team-member p {
+  color: #a0aec0;
+}
+
+body.dark .values-list li {
+  background: #2d3e5f;
+  border-left-color: #667eea;
+}
+
+body.dark .values-list strong {
+  color: #60a5fa;
+}
+
+body.dark .feature-list li:before {
+  color: #667eea;
+}
+
+body.dark .learning-goals li:before {
+  background: #667eea;
+}
+
+body.dark .contact-info {
+  background: #334155;
+  border-color: #475569;
+}
+
+body.dark .contact-info h3 {
+  color: #60a5fa;
+}
+
+body.dark .contact-info p {
+  color: #a0aec0;
+}
+
+body.dark .contact-form {
+  background: #334155;
+  border-color: #475569;
+}
+
+body.dark .form-group label {
+  color: #e2e8f0;
+}
+
+body.dark .form-group input,
+body.dark .form-group textarea {
+  background: #1e293b;
+  border-color: #475569;
+  color: #e2e8f0;
+}
+
+body.dark .form-group input:focus,
+body.dark .form-group textarea:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+body.dark .form-group.error input,
+body.dark .form-group.error textarea {
+  border-color: #ef4444;
+}
+
+body.dark .legal-content h3 {
+  color: #60a5fa;
+}
+
+body.dark footer {
+  background: linear-gradient(135deg, #0f172a 0%, #0f172a 100%);
+  border-top: 1px solid #334155;
+}
+
+body.dark .footer-section h3 {
+  color: #e2e8f0;
+}
+
+body.dark .footer-section a {
+  color: #60a5fa;
+}
+
+body.dark .footer-section a:hover {
+  color: #93c5fd;
+}
+
+body.dark .galerie img {
+  border: 1px solid #475569;
+}
+
+body.dark .exercise-card {
+  background: #334155;
+  border: 2px solid #475569;
+}
+
+body.dark .exercise-card h2 {
+  color: #e2e8f0;
+  border-bottom-color: #667eea;
+}
+
+body.dark .exercise-card p {
+  color: #a0aec0;
+}
+
+body.dark .exercise-card table {
+  border-color: #475569;
+}
+
+body.dark .exercise-card th,
+body.dark .exercise-card td {
+  border-color: #475569;
+  color: #a0aec0;
+}
+
+body.dark .exercise-card th {
+  background-color: #2d3e5f;
+  color: #e2e8f0;
+}
+
+/* ====================== EXERCISE CARDS ====================== */
+
+.exercise-card {
+  background: white;
+  border: 2px solid #e2e8f0;
+  padding: 2rem;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.exercise-card:hover {
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
+  border-color: #667eea;
+}
+
+.exercise-card h2 {
+  color: #0f172a;
+  border-bottom: 3px solid #667eea;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.exercise-card p {
+  color: #475569;
+}
+
+.exercise-card ul {
+  margin-left: 1.5rem;
+}
+
+.exercise-card table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
 }

eis_projekt.html

@@ -18,10 +18,20 @@
       <ul class="nav-menu">
         <li><a href="index.html">Start</a></li>
         <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
         <li><a href="eis_projekt.html" class="active">Projekt</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
+        <li style="position: relative;">
+          <a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
+          <ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
+            <li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
+            <li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
+            <li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
+          </ul>
+        </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+        <li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
       </ul>
       <div class="hamburger">
         <span></span>

impressum.html

@@ -18,10 +18,20 @@
       <ul class="nav-menu">
         <li><a href="index.html">Start</a></li>
         <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
         <li><a href="eis_projekt.html">Projekt</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html" class="active">Impressum</a></li>
+        <li style="position: relative;">
+          <a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
+          <ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
+            <li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
+            <li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
+            <li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
+          </ul>
+        </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+        <li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
       </ul>
       <div class="hamburger">
         <span></span>
@@ -45,8 +55,8 @@
     <div class="legal-content">
       <h3>Inhaltlich Verantwortliche</h3>
       <p>
-        <strong>Name:</strong> [Hier Namen der Studierenden einfügen]<br>
-        <strong>E-Mail:</strong> <a href="mailto:info@beispiel.de">info@beispiel.de</a><br>
+        <strong>Name:</strong> Dylan Barnes & Leon Walter <br>
+        <strong>E-Mail:</strong> <a href="mailto:info@beispiel.de">dylan.barnes-weiland@stud.ph-weingarten.de</a><br>
         <strong>Telefon:</strong> <a href="tel:+49123456789">+49 123 456789</a>
       </p>
 

index.html

@@ -14,7 +14,7 @@
 <header>
   <nav class="navbar">
     <div class="nav-container">
-      <div class="logo">EIS Mayonaize Projekt</div>
+      <div class="logo">EIS Projekt</div>
       <ul class="nav-menu">
         <li><a href="index.html" class="active">Start</a></li>
         <li><a href="ueber_uns.html">Über uns</a></li>
@@ -22,7 +22,16 @@
         <li><a href="eis_projekt.html">Projekt</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
+        <li style="position: relative;">
+          <a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
+          <ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
+            <li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
+            <li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
+            <li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
+          </ul>
+        </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+        <li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
       </ul>
       <div class="hamburger">
         <span></span>
@@ -81,6 +90,7 @@
       <ul>
         <li><a href="impressum.html">Impressum</a></li>
         <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
       </ul>
     </div>
     <div class="footer-section">

js/notenrechner-dom.js

@@ -0,0 +1,149 @@
+// ====================== AUFGABE 3: NOTENRECHNER DOM-VERSION ======================
+
+/**
+ * Berechnet die Note basierend auf der Prozentpunktzahl
+ * @param {number} prozentsatz - Der Prozentsatz (0-100)
+ * @returns {string} Die entsprechende Note als Text
+ */
+function berechneNoteDom(prozentsatz) {
+  if (prozentsatz >= 90) {
+    return "sehr gut";
+  } else if (prozentsatz >= 75) {
+    return "gut";
+  } else if (prozentsatz >= 60) {
+    return "befriedigend";
+  } else if (prozentsatz >= 50) {
+    return "ausreichend";
+  } else {
+    return "nicht bestanden";
+  }
+}
+
+/**
+ * Gibt die Farbe basierend auf der Note zurück
+ * @param {string} note - Die Note
+ * @returns {string} Der CSS-Klassennamen für die Farbe
+ */
+function getFarbeKlasse(note) {
+  switch (note) {
+    case "sehr gut":
+    case "gut":
+      return "";
+    case "befriedigend":
+      return "befriedigend";
+    case "ausreichend":
+      return "ausreichend";
+    case "nicht bestanden":
+      return "nicht-bestanden";
+    default:
+      return "";
+  }
+}
+
+/**
+ * Initialisiert den Notenrechner und registriert Event Listener
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("notenForm");
+  const calculateBtn = document.getElementById("calculateBtn");
+  const inputField = document.getElementById("punkte");
+  const errorMessage = document.getElementById("errorMessage");
+  const resultatDiv = document.getElementById("ergebnis");
+  const resultText = document.getElementById("resultText");
+  const progressBar = document.getElementById("progressBar");
+  const percentageText = document.getElementById("percentageText");
+
+  if (!form || !calculateBtn) {
+    return; // Nur auf notenrechner-dom.html verfügbar
+  }
+
+  /**
+   * Validiert die Eingabe
+   * @returns {boolean} true wenn die Eingabe gültig ist, sonst false
+   */
+  function validateInput() {
+    const value = inputField.value.trim();
+
+    // Prüfung: Ist das Feld leer?
+    if (value === "") {
+      errorMessage.textContent = "Fehler: Bitte geben Sie eine Punktzahl ein.";
+      inputField.classList.add("error");
+      inputField.style.borderColor = "red";
+      return false;
+    }
+
+    // Prüfung: Ist es eine Zahl?
+    const punkte = parseFloat(value);
+    if (isNaN(punkte)) {
+      errorMessage.textContent = "Fehler: Bitte geben Sie eine gültige Zahl ein.";
+      inputField.classList.add("error");
+      inputField.style.borderColor = "red";
+      return false;
+    }
+
+    // Prüfung: Ist die Zahl zwischen 0 und 100?
+    if (punkte < 0 || punkte > 100) {
+      errorMessage.textContent = "Fehler: Die Punktzahl muss zwischen 0 und 100 liegen.";
+      inputField.classList.add("error");
+      inputField.style.borderColor = "red";
+      return false;
+    }
+
+    // Validierung erfolgreich
+    errorMessage.textContent = "";
+    inputField.classList.remove("error");
+    inputField.style.borderColor = "";
+    return true;
+  }
+
+  /**
+   * Berechnet die Note und zeigt das Ergebnis an
+   */
+  function calculateGrade() {
+    if (!validateInput()) {
+      resultatDiv.style.display = "none";
+      return;
+    }
+
+    const punkte = parseFloat(inputField.value);
+    const note = berechneNoteDom(punkte);
+    const farbeKlasse = getFarbeKlasse(note);
+
+    // Ergebnis anzeigen
+    resultText.textContent = `${punkte} Punkte = ${note}`;
+
+    // Progress Bar aktualisieren
+    progressBar.style.width = `${punkte}%`;
+    progressBar.textContent = `${punkte}%`;
+    progressBar.className = `progress-bar ${farbeKlasse}`;
+
+    // Prozentsatz-Text aktualisieren
+    percentageText.textContent = `${punkte}% erreicht`;
+
+    // Resultat-Container anzeigen
+    resultatDiv.style.display = "block";
+  }
+
+  // Event Listener: Button Click
+  calculateBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    calculateGrade();
+  });
+
+  // Event Listener: Enter-Taste
+  inputField.addEventListener("keypress", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      calculateGrade();
+    }
+  });
+
+  // Event Listener: Input ändern (Fehler löschen)
+  inputField.addEventListener("input", () => {
+    if (inputField.value.trim() !== "") {
+      errorMessage.textContent = "";
+      inputField.classList.remove("error");
+      inputField.style.borderColor = "";
+    }
+  });
+});

js/notenrechner.js

@@ -0,0 +1,75 @@
+// ====================== AUFGABE 1: NOTENRECHNER ======================
+
+/**
+ * Berechnet die Note basierend auf der Punktzahl
+ * @param {number} punkte - Die erreichte Punktzahl
+ * @returns {string} Die entsprechende Note als Text
+ */
+function berechneNote(punkte) {
+  if (punkte >= 90) {
+    return "sehr gut";
+  } else if (punkte >= 75) {
+    return "gut";
+  } else if (punkte >= 60) {
+    return "befriedigend";
+  } else if (punkte >= 50) {
+    return "ausreichend";
+  } else {
+    return "nicht bestanden";
+  }
+}
+
+/**
+ * Startet den interaktiven Notenrechner
+ * Fragt nach Punktzahl und maximaler Punktzahl
+ */
+function startNotenrechner() {
+  // Punkte abfragen
+  const punkteInput = prompt("Geben Sie Ihre Punktzahl ein:");
+  
+  // Prüfung auf Abbruch oder leere Eingabe
+  if (punkteInput === null || punkteInput.trim() === "") {
+    alert("Abgebrochen.");
+    return;
+  }
+  
+  const punkte = parseFloat(punkteInput);
+  
+  // Validierung: Zahl
+  if (isNaN(punkte)) {
+    alert("Fehler: Bitte geben Sie eine gültige Zahl ein!");
+    return;
+  }
+  
+  // Maximale Punktzahl abfragen
+  const maxPunkteInput = prompt("Geben Sie die maximale Punktzahl ein:");
+  
+  // Prüfung auf Abbruch oder leere Eingabe
+  if (maxPunkteInput === null || maxPunkteInput.trim() === "") {
+    alert("Abgebrochen.");
+    return;
+  }
+  
+  const maxPunkte = parseFloat(maxPunkteInput);
+  
+  // Validierung: Zahl
+  if (isNaN(maxPunkte) || maxPunkte <= 0) {
+    alert("Fehler: Bitte geben Sie eine gültige Zahl ein!");
+    return;
+  }
+  
+  // Prozentsatz berechnen
+  const prozentsatz = (punkte / maxPunkte) * 100;
+  
+  // Note berechnen (basierend auf Prozentsatz)
+  const note = berechneNote(prozentsatz);
+  
+  // Ergebnis formatieren
+  const ergebnis = `${punkte} von ${maxPunkte} Punkten (${prozentsatz.toFixed(2)}%) = ${note}`;
+  
+  // Ausgabe auf Konsole
+  console.log(ergebnis);
+  
+  // Ausgabe als Alert
+  alert(ergebnis);
+}

js/script.js

@@ -282,4 +282,27 @@ document.querySelectorAll('.content-section').forEach(section => {
 // ====================== UTILITY: CONSOLE MESSAGE ======================
 
 console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;');
-console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;');
+console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;');
+
+// ====================== DARK MODE TOGGLE ======================
+
+document.addEventListener("DOMContentLoaded", () => {
+  const toggle = document.getElementById("dark-mode-toggle");
+
+  if (!toggle) return;
+
+  // Beim Laden: gespeicherten Zustand wiederherstellen
+  if (localStorage.getItem("darkMode") === "true") {
+    document.body.classList.add("dark");
+    toggle.textContent = "☀️ Light Mode";
+  }
+
+  // Beim Klick: Zustand umschalten und speichern
+  toggle.addEventListener("click", (e) => {
+    e.preventDefault();
+    document.body.classList.toggle("dark");
+    const isDark = document.body.classList.contains("dark");
+    localStorage.setItem("darkMode", isDark);
+    toggle.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";
+  });
+});

js/textanalyse.js

@@ -0,0 +1,52 @@
+// ====================== AUFGABE 2: TEXTANALYSE ======================
+
+/**
+ * Analysiert einen gegebenen Text
+ * @param {string} text - Der zu analysierende Text
+ * @returns {string} Ein formatierter String mit den Analyseergebnissen (oder Fehlermeldung)
+ */
+function analyseText(text) {
+  // Prüfung: Ist der Text leer?
+  if (text.trim() === "") {
+    return "Fehler: Der Text darf nicht leer sein!";
+  }
+  
+  // Berechnung
+  const anzahlZeichen = text.length;
+  const anzahlWoerter = text.split(" ").length;
+  const grossbuchstaben = text.toUpperCase();
+  
+  // Ergebnis als Template Literal formatieren
+  return `
+Textanalyse:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Anzahl der Zeichen: ${anzahlZeichen}
+Anzahl der Wörter: ${anzahlWoerter}
+Großbuchstaben: ${grossbuchstaben}
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  `.trim();
+}
+
+/**
+ * Startet die interaktive Textanalyse
+ * Fragt den Benutzer nach einem Text und gibt die Analyse aus
+ */
+function startTextanalyse() {
+  // Text abfragen
+  const text = prompt("Geben Sie einen Text ein:");
+  
+  // Prüfung auf Abbruch
+  if (text === null) {
+    alert("Abgebrochen.");
+    return;
+  }
+  
+  // Text analysieren
+  const ergebnis = analyseText(text);
+  
+  // Ausgabe auf Konsole
+  console.log(ergebnis);
+  
+  // Ausgabe als Alert
+  alert(ergebnis);
+}

kontakt.html

@@ -10,18 +10,27 @@
 </head>
 
 <body>
-
 <header>
   <nav class="navbar">
     <div class="nav-container">
-      <div class="logo">fuckshitstackklhjkh</div>
+      <div class="logo">EIS Projekt</div>
       <ul class="nav-menu">
         <li><a href="index.html">Start</a></li>
         <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
         <li><a href="eis_projekt.html">Projekt</a></li>
         <li><a href="kontakt.html" class="active">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
+        <li style="position: relative;">
+          <a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
+          <ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
+            <li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
+            <li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
+            <li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
+          </ul>
+        </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+        <li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
       </ul>
       <div class="hamburger">
         <span></span>

notenrechner-dom.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Notenrechner DOM - EIS Projekt</title>
+  <link rel="icon" href="img/favicon.png" type="image/png">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/notenrechner-dom.css">
+</head>
+
+<body>
+
+<header>
+  <nav class="navbar">
+    <div class="nav-container">
+      <div class="logo">EIS Projekt</div>
+      <ul class="nav-menu">
+        <li><a href="index.html">Start</a></li>
+        <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
+        <li><a href="eis_projekt.html">Projekt</a></li>
+        <li><a href="kontakt.html">Kontakt</a></li>
+        <li><a href="impressum.html">Impressum</a></li>
+        <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+      </ul>
+      <div class="hamburger">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<main>
+  <section class="content-section">
+    <div class="container">
+      <h1>Notenrechner DOM-Version (Aufgabe 3)</h1>
+      <p>Ein interaktiver Notenrechner direkt auf der Webseite – ohne prompt() und alert().</p>
+      
+      <div class="exercise-card">
+        <h2>Punkte eingeben und Note berechnen</h2>
+        
+        <form id="notenForm" class="grade-form">
+          <div class="form-group">
+            <label for="punkte">Punktzahl (0-100):</label>
+            <input 
+              type="number" 
+              id="punkte" 
+              name="punkte" 
+              min="0" 
+              max="100" 
+              placeholder="z.B. 85"
+              class="form-input"
+            >
+            <span id="errorMessage" class="error-message"></span>
+          </div>
+          
+          <button type="button" id="calculateBtn" class="btn">Berechnen</button>
+        </form>
+        
+        <div id="ergebnis" class="result-container" style="display: none;">
+          <h3>Ergebnis</h3>
+          <p id="resultText"></p>
+          <div class="progress-bar-container">
+            <div id="progressBar" class="progress-bar"></div>
+          </div>
+          <p id="percentageText" class="percentage-text"></p>
+        </div>
+      </div>
+
+      <div class="exercise-card" style="margin-top: 2rem;">
+        <h2>Notenskala</h2>
+        <table style="width: 100%; border-collapse: collapse;">
+          <tr style="background-color: #f0f0f0;">
+            <th style="border: 1px solid #ddd; padding: 0.5rem;">Punkte</th>
+            <th style="border: 1px solid #ddd; padding: 0.5rem;">Note</th>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">90–100</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">🟢 Sehr gut</td>
+          </tr>
+          <tr style="background-color: #f9f9f9;">
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">75–89</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">🟢 Gut</td>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">60–74</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">🟡 Befriedigend</td>
+          </tr>
+          <tr style="background-color: #f9f9f9;">
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">50–59</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">🟡 Ausreichend</td>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Unter 50</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">🔴 Nicht bestanden</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="footer-content">
+    <p>&copy; 2026 EIS Projekt. Alle Rechte vorbehalten.</p>
+  </div>
+</footer>
+
+<script src="js/notenrechner-dom.js"></script>
+<script src="js/script.js"></script>
+
+</body>
+
+</html>

notenrechner.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Notenrechner - EIS Projekt</title>
+  <link rel="icon" href="img/favicon.png" type="image/png">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+<header>
+  <nav class="navbar">
+    <div class="nav-container">
+      <div class="logo">EIS Projekt</div>
+      <ul class="nav-menu">
+        <li><a href="index.html">Start</a></li>
+        <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
+        <li><a href="eis_projekt.html">Projekt</a></li>
+        <li><a href="kontakt.html">Kontakt</a></li>
+        <li><a href="impressum.html">Impressum</a></li>
+        <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+      </ul>
+      <div class="hamburger">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<main>
+  <section class="content-section">
+    <div class="container">
+      <h1>Notenrechner (Aufgabe 1)</h1>
+      <p>Ein einfacher Notenrechner, der Punkte in Noten umrechnet.</p>
+      
+      <div class="exercise-card">
+        <h2>Notenrechner mit prompt() und alert()</h2>
+        <p>Klicken Sie auf den Button, um den Notenrechner zu starten:</p>
+        <button onclick="startNotenrechner()" class="btn">Notenrechner starten</button>
+        <p style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
+          Das Programm fragt Sie nach Ihrer Punktzahl und der maximalen Punktzahl, 
+          berechnet den Prozentsatz und gibt die entsprechende Note aus.
+        </p>
+      </div>
+
+      <div class="exercise-card" style="margin-top: 2rem;">
+        <h2>Notenskala</h2>
+        <table style="width: 100%; border-collapse: collapse;">
+          <tr style="background-color: #f0f0f0;">
+            <th style="border: 1px solid #ddd; padding: 0.5rem;">Punkte</th>
+            <th style="border: 1px solid #ddd; padding: 0.5rem;">Note</th>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">90–100</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Sehr gut</td>
+          </tr>
+          <tr style="background-color: #f9f9f9;">
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">75–89</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Gut</td>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">60–74</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Befriedigend</td>
+          </tr>
+          <tr style="background-color: #f9f9f9;">
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">50–59</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Ausreichend</td>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Unter 50</td>
+            <td style="border: 1px solid #ddd; padding: 0.5rem;">Nicht bestanden</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="footer-content">
+    <p>&copy; 2026 EIS Projekt. Alle Rechte vorbehalten.</p>
+  </div>
+</footer>
+
+<script src="js/notenrechner.js"></script>
+<script src="js/script.js"></script>
+
+</body>
+
+</html>

team.html

@@ -153,7 +153,16 @@
         <li><a href="eis_projekt.html">Projekt</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
+        <li style="position: relative;">
+          <a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
+          <ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
+            <li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
+            <li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
+            <li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
+          </ul>
+        </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+        <li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
       </ul>
       <div class="hamburger">
         <span></span>

textanalyse.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Textanalyse - EIS Projekt</title>
+  <link rel="icon" href="img/favicon.png" type="image/png">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+<header>
+  <nav class="navbar">
+    <div class="nav-container">
+      <div class="logo">EIS Projekt</div>
+      <ul class="nav-menu">
+        <li><a href="index.html">Start</a></li>
+        <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
+        <li><a href="eis_projekt.html">Projekt</a></li>
+        <li><a href="kontakt.html">Kontakt</a></li>
+        <li><a href="impressum.html">Impressum</a></li>
+        <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+      </ul>
+      <div class="hamburger">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<main>
+  <section class="content-section">
+    <div class="container">
+      <h1>Textanalyse (Aufgabe 2)</h1>
+      <p>Ein einfaches Tool zur Analyse von Texten.</p>
+      
+      <div class="exercise-card">
+        <h2>Text analysieren</h2>
+        <p>Klicken Sie auf den Button, um einen Text zu analysieren:</p>
+        <button onclick="startTextanalyse()" class="btn">Text analysieren</button>
+        <p style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
+          Das Programm fragt Sie nach einem Text und zeigt dann:
+          <ul style="margin-top: 0.5rem;">
+            <li>Die Anzahl der Zeichen</li>
+            <li>Die Anzahl der Wörter</li>
+            <li>Den Text in Großbuchstaben</li>
+          </ul>
+        </p>
+      </div>
+
+      <div class="exercise-card" style="margin-top: 2rem;">
+        <h2>Beispiel</h2>
+        <p style="color: #666; font-style: italic;">
+          Input: "Hallo Welt"<br>
+          <br>
+          Output:<br>
+          Zeichen: 10<br>
+          Wörter: 2<br>
+          Großbuchstaben: HALLO WELT
+        </p>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="footer-content">
+    <p>&copy; 2026 EIS Projekt. Alle Rechte vorbehalten.</p>
+  </div>
+</footer>
+
+<script src="js/textanalyse.js"></script>
+<script src="js/script.js"></script>
+
+</body>
+
+</html>

ueber_uns.html

@@ -18,10 +18,20 @@
       <ul class="nav-menu">
         <li><a href="index.html">Start</a></li>
         <li><a href="ueber_uns.html" class="active">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
         <li><a href="eis_projekt.html">Projekt</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
+        <li style="position: relative;">
+          <a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
+          <ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
+            <li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
+            <li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
+            <li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
+          </ul>
+        </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
+        <li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
       </ul>
       <div class="hamburger">
         <span></span>