diff --git a/js/notenrechner.js b/js/notenrechner.js
index b504177..fdee195 100644
--- a/js/notenrechner.js
+++ b/js/notenrechner.js
@@ -7,46 +7,63 @@ function berechneNote(prozent) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-  const btn = document.getElementById("berechnen-btn");
+  const hero = document.querySelector(".page-hero");
+
+  const ui = document.createElement("div");
+  ui.className = "page";
+  ui.innerHTML = `
+    <div style="display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;">
+      <input type="number" id="punkte" placeholder="Deine Punkte" style="flex:1;min-width:140px;padding:0.8rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);">
+      <input type="number" id="maxPunkte" placeholder="Maximale Punkte" style="flex:1;min-width:140px;padding:0.8rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);">
+    </div>
+    <a class="btn" id="berechnen-btn" href="#">Berechnen</a>
+    <div id="nr-ergebnis" style="margin-top:2rem;display:none;">
+      <hr>
+      <div class="cards" style="margin-top:1.5rem;">
+        <div class="card"><div class="num" id="r-prozent">0%</div><h3>Prozent</h3></div>
+        <div class="card"><div class="num" id="r-note">–</div><h3>Note</h3></div>
+      </div>
+      <div id="balken-wrap" style="margin-top:1.5rem;background:rgba(255,255,255,0.06);height:12px;">
+        <div id="balken" style="height:100%;width:0%;transition:width 0.5s ease;"></div>
+      </div>
+      <p id="ergebnis" style="margin-top:1rem;font-size:0.88rem;color:rgba(255,255,255,0.5);"></p>
+    </div>
+  `;
+
+  hero.insertAdjacentElement("afterend", ui);
+
+  document.getElementById("berechnen-btn").addEventListener("click", (e) => {
+    e.preventDefault();
 
-  btn.addEventListener("click", () => {
     const inputPunkte = document.getElementById("punkte");
     const inputMax = document.getElementById("maxPunkte");
-    const ergebnis = document.getElementById("ergebnis");
-    const balken = document.getElementById("balken");
-
     const punkte = Number(inputPunkte.value);
     const maxPunkte = Number(inputMax.value);
 
-    // Eingabeprüfung
     const isValid = inputPunkte.value !== "" && inputMax.value !== ""
-                    && !isNaN(punkte) && !isNaN(maxPunkte)
-                    && punkte <= maxPunkte && maxPunkte > 0;
+      && !isNaN(punkte) && !isNaN(maxPunkte)
+      && punkte >= 0 && punkte <= maxPunkte && maxPunkte > 0;
 
-    inputPunkte.style.borderColor = isValid ? "" : "red";
-    inputMax.style.borderColor = isValid ? "" : "red";
+    inputPunkte.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red";
+    inputMax.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red";
 
     if (!isValid) {
-      ergebnis.textContent = "Bitte gültige Werte eingeben.";
-      balken.style.width = "0%";
+      document.getElementById("ergebnis").textContent = "Bitte gültige Werte eingeben.";
+      document.getElementById("nr-ergebnis").style.display = "block";
+      document.getElementById("balken").style.width = "0%";
       return;
     }
 
-    // Berechnung
     const prozent = Math.round((punkte / maxPunkte) * 100);
     const note = berechneNote(prozent);
 
-    // Ausgabe
-    ergebnis.textContent = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;
+    document.getElementById("r-prozent").textContent = prozent + "%";
+    document.getElementById("r-note").textContent = note;
+    document.getElementById("ergebnis").textContent = `${punkte} von ${maxPunkte} Punkten`;
+    document.getElementById("nr-ergebnis").style.display = "block";
 
-    // Balken
+    const balken = document.getElementById("balken");
     balken.style.width = prozent + "%";
-    if (prozent >= 75) {
-      balken.style.backgroundColor = "green";
-    } else if (prozent >= 50) {
-      balken.style.backgroundColor = "orange";
-    } else {
-      balken.style.backgroundColor = "red";
-    }
+    balken.style.backgroundColor = prozent >= 75 ? "#4ade80" : prozent >= 50 ? "#fb923c" : "#f87171";
   });
 });
\ No newline at end of file
diff --git a/uebungen/notenrechner.html b/uebungen/notenrechner.html
index adfde96..c8ce968 100644
--- a/uebungen/notenrechner.html
+++ b/uebungen/notenrechner.html
@@ -16,11 +16,11 @@
 <li><a href="../ueber_mich.html">Über mich</a></li>
 <li><a href="../eis_projekt.html">Projekt</a></li>
 <li class="dropdown">
-  <a href="#">Übungen ▾</a>
-  <ul class="dropdown-menu">
-    <li><a href="notenrechner.html" class="active">Notenrechner</a></li>
-    <li><a href="textanalyse.html">Textanalyse</a></li>
-  </ul>
+<a href="#">Übungen ▾</a>
+<ul class="dropdown-menu">
+<li><a href="notenrechner.html" class="active">Notenrechner</a></li>
+<li><a href="textanalyse.html">Textanalyse</a></li>
+</ul>
 </li>
 <li><a href="../kontakt.html">Kontakt</a></li>
 <li><a href="../impressum.html">Impressum</a></li>
@@ -31,11 +31,6 @@
 <p class="hero-tag">Übung</p>
 <h1>Notenrechner</h1>
 <p class="sub">Gib deine Punktzahl ein und erhalte deine Note.</p>
-<input type="number" id="punkte" placeholder="Deine Punkte (0–100)">
-<input type="number" id="maxPunkte" placeholder="Maximale Punkte">
-<button id="berechnen-btn">Berechnen</button>
-<p id="ergebnis"></p>
-<div id="balken" style="height: 18px; width: 0%; border-radius: 4px; margin-top: 1rem; transition: width 0.4s;"></div>
 </div>
 <footer>
 <a href="../impressum.html">Impressum</a> · <a href="../kontakt.html">Kontakt</a>