fix fade alert

app/views/layouts/application.html.erb

@@ -154,12 +154,12 @@
   </div>
 </nav>
 
-<div class="container" id="alert-notice">
+<div class="container">
   <% if notice %>
-    <div class="alert alert-success"><%= notice %></div>
+    <div class="alert alert-success"  id="alert-notice"><%= notice %></div>
   <% end %>
   <% if alert %>
-    <div class="alert alert-danger"><%= alert %></div>
+    <div class="alert alert-danger"  id="alert-notice"><%= alert %></div>
   <% end %>
 
   <%= yield %>
@@ -171,20 +171,20 @@
 </footer>
 </body>
 </html>
-
 <script>
     document.addEventListener("turbo:load", function () {
-        console.log("🚀 Turbo geladen");
-
-        const container = document.getElementById("alert-notice");
-        if (!container) return;
-
-        const alerts = container.querySelectorAll(".alert");
-        alerts.forEach(function (alertEl) {
-            setTimeout(function () {
-                alertEl.classList.add("fade");
-                setTimeout(() => alertEl.remove(), 500);
-            }, 2000);
-        });
+        const flash = document.getElementById("alert-notice");
+        if (!flash) return;
+
+        // nur wenn tatsächlich Inhalt drin ist
+        if (!flash.textContent.trim()) return;
+
+        setTimeout(function () {
+            flash.style.transition = "opacity 0.5s ease";
+            flash.style.opacity = "0";
+
+            setTimeout(() => flash.remove(), 500);
+        }, 2000);
     });
 </script>
+