diff --git a/css/style.css b/css/style.css
index 95b7333..3100b88 100644
--- a/css/style.css
+++ b/css/style.css
@@ -932,33 +932,116 @@ textarea {
   margin-top: 1.5rem;
 }
 
+/* Enhanced Progress Bar Container */
+.progress-bar-container-enhanced {
+  margin-bottom: 1rem;
+}
+
 .progress-bar-background {
   width: 100%;
-  height: 30px;
+  height: 40px;
   background: rgba(255, 192, 203, 0.2);
   border: 2px solid rgba(255, 105, 180, 0.2);
-  border-radius: 8px;
+  border-radius: 10px;
   overflow: hidden;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.8rem;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .progress-bar-fill {
   height: 100%;
-  transition: width 0.5s ease, background-color 0.3s ease;
+  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
+  padding-right: 10px;
+  font-weight: 700;
+  font-size: 0.85rem;
   color: white;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  position: relative;
+}
+
+.progress-bar-text {
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.progress-bar-labels {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 5px;
+  font-size: 0.75rem;
+  color: #b8659c;
   font-weight: 600;
-  font-size: 0.9rem;
 }
 
 .progress-text {
   text-align: center;
   color: #6b3a5f;
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.progress-emoji {
+  font-size: 1.2rem;
+}
+
+/* Mini Progress Bar für Multiple Notes */
+.mini-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-top: 0.8rem;
+}
+
+.mini-progress-bar-bg {
+  flex: 1;
+  height: 20px;
+  background: rgba(255, 192, 203, 0.2);
+  border: 1px solid rgba(255, 105, 180, 0.2);
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.mini-progress-bar-fill {
+  height: 100%;
+  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  border-radius: 6px;
+}
+
+.mini-progress-percent {
+  min-width: 45px;
+  text-align: right;
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: #6b3a5f;
+  background: rgba(255, 192, 203, 0.15);
+  padding: 0.2rem 0.6rem;
+  border-radius: 4px;
+}
+
+/* Result Details with Bar */
+.result-details-with-bar {
+  flex: 1;
+}
+
+.result-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
 }
 
 /* Grades Container DOM */
@@ -1205,6 +1288,11 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.average-percent-dom:hover {
+  transform: scale(1.1);
 }
 
 .average-note-dom {
@@ -1212,6 +1300,38 @@ textarea {
   font-weight: 700;
 }
 
+/* Average Progress Bar */
+.average-progress-bar {
+  width: 100%;
+  height: 35px;
+  background: rgba(255, 192, 203, 0.2);
+  border: 2px solid rgba(255, 105, 180, 0.2);
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 1rem 0;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.average-progress-bg {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.average-progress-fill {
+  height: 100%;
+  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: white;
+  font-size: 0.9rem;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
 .average-details-dom {
   margin-top: 1rem;
   color: #b8659c;
diff --git a/js/notenrechner-dom.js b/js/notenrechner-dom.js
index b70ac0b..c138cb7 100644
--- a/js/notenrechner-dom.js
+++ b/js/notenrechner-dom.js
@@ -266,18 +266,53 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   /**
-   * Aktualisiert die Progressbar
+   * Aktualisiert die Progressbar mit farbiger Visualisierung
    */
   function updateProgressBar(percent, color) {
     simpleProgressBar.style.display = 'block';
+    
+    // Bestimme die Hintergrundfarbe basierend auf der Note
+    let bgColor = color;
+    let bgOpacity = 0.2;
+    
     simpleProgressBar.innerHTML = `
-      <div class="progress-bar-background">
-        <div class="progress-bar-fill" style="width: ${percent}%; background-color: ${color};"></div>
+      <div class="progress-bar-container-enhanced">
+        <div class="progress-bar-background" style="background-color: rgba(${hexToRgb(color)}, ${bgOpacity});">
+          <div class="progress-bar-fill" style="width: ${percent}%; background-color: ${color}; box-shadow: 0 0 15px ${color};">
+            <span class="progress-bar-text">${percent}%</span>
+          </div>
+        </div>
+        <div class="progress-bar-labels">
+          <span class="label-0">0%</span>
+          <span class="label-25">25%</span>
+          <span class="label-50">50%</span>
+          <span class="label-75">75%</span>
+          <span class="label-100">100%</span>
+        </div>
       </div>
-      <p class="progress-text">${percent}% Complete</p>
+      <p class="progress-text">
+        <span class="progress-emoji">📊</span> 
+        Fortschritt: <strong>${percent}%</strong> – 
+        <span style="color: ${color}; font-weight: bold;">Sehr Gut Bereich</span>
+      </p>
     `;
   }
 
+  /**
+   * Konvertiert Hex-Farben zu RGB für rgba()
+   */
+  function hexToRgb(hex) {
+    // Entfernt das # Zeichen
+    hex = hex.replace('#', '');
+    
+    // Konvertiert zu RGB
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    
+    return `${r}, ${g}, ${b}`;
+  }
+
   /**
    * Neue Grade-Input-Zeile hinzufügen (Multiple)
    */
@@ -376,14 +411,24 @@ document.addEventListener('DOMContentLoaded', function() {
       return;
     }
 
-    // Einzelnoten anzeigen
+    // Einzelnoten anzeigen mit Progressbars
     let resultHTML = '<div class="results-list"><h4>📊 Ihre Noten:</h4>';
     noten.forEach((note, index) => {
       resultHTML += `
         <div class="result-item-dom">
           <span class="result-number">#${index + 1}</span>
-          <span class="result-details">${note.punkte} / ${note.maxPunkte} (${note.prozent}%)</span>
-          <span class="result-grade-dom" style="color: ${note.color};">${note.note}</span>
+          <div class="result-details-with-bar">
+            <div class="result-top">
+              <span class="result-details">${note.punkte} / ${note.maxPunkte}</span>
+              <span class="result-grade-dom" style="color: ${note.color};">${note.note}</span>
+            </div>
+            <div class="mini-progress-bar">
+              <div class="mini-progress-bar-bg">
+                <div class="mini-progress-bar-fill" style="width: ${note.prozent}%; background-color: ${note.color}; box-shadow: 0 0 8px ${note.color};"></div>
+              </div>
+              <span class="mini-progress-percent">${note.prozent}%</span>
+            </div>
+          </div>
         </div>
       `;
     });
@@ -410,10 +455,15 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="average-box-dom">
           <h4>📈 Durchschnitt:</h4>
           <div class="average-display-dom">
-            <div class="average-percent-dom">${durchschnittProzent}%</div>
+            <div class="average-percent-dom" style="border: 3px solid ${durchschnittColor}; box-shadow: 0 0 20px ${durchschnittColor};">${durchschnittProzent}%</div>
             <div class="average-note-dom" style="color: ${durchschnittColor};">${durchschnittNote}</div>
           </div>
-          <p class="average-details-dom">Von ${noten.length} Note(n)</p>
+          <div class="average-progress-bar">
+            <div class="average-progress-bg">
+              <div class="average-progress-fill" style="width: ${durchschnittProzent}%; background-color: ${durchschnittColor}; box-shadow: 0 0 15px ${durchschnittColor};"></div>
+            </div>
+          </div>
+          <p class="average-details-dom">Von ${noten.length} Note(n) – Durchschnitt: <strong>${durchschnittProzent}%</strong></p>
         </div>
       `;