From d272844b175c6d5e23cbfcb438be9c6a7d6e5e27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20M=C3=BCller?= <ich@eskimue.de>
Date: Tue, 5 May 2026 19:34:09 +0200
Subject: [PATCH] Regen Blinkt nun

---
 .../dist/sternwarte-card.js                   | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/sternwarte-homeassistant-card/dist/sternwarte-card.js b/sternwarte-homeassistant-card/dist/sternwarte-card.js
index 43b47e2..25dc62f 100644
--- a/sternwarte-homeassistant-card/dist/sternwarte-card.js
+++ b/sternwarte-homeassistant-card/dist/sternwarte-card.js
@@ -391,8 +391,9 @@ class SternwarteCard extends HTMLElement {
   _boolBadge(label, entityId, onText = "Aktiv", offText = "Aus", extraClass = "") {
     const state = this._state(entityId);
     const on = state?.state === "on";
+    const animStyle = (on && extraClass) ? ` style="animation-delay: -${Date.now() % 1000}ms"` : "";
     return `
-      <div class="badge ${on ? "on" : ""} ${extraClass}">
+      <div class="badge ${on ? "on" : ""} ${extraClass}"${animStyle}>
         <span class="badge-label">${label}</span>
         <span class="badge-value">${on ? onText : offText}</span>
       </div>
@@ -1093,12 +1094,16 @@ class SternwarteCard extends HTMLElement {
           background: rgba(76, 175, 80, 0.12);
           border-color: rgba(76, 175, 80, 0.3);
         }
-        .badge.moving.on,
-        .badge.rain.on {
+        .badge.moving.on {
           animation: moving-badge-blink 1s linear infinite;
           background: rgba(255, 179, 0, 0.2);
           border-color: rgba(255, 179, 0, 0.55);
         }
+        .badge.rain.on {
+          animation: rain-badge-blink 1s linear infinite;
+          background: rgba(220, 50, 50, 0.2);
+          border-color: rgba(220, 50, 50, 0.55);
+        }
         .badge-label {
           display: block;
           font-size: 12px;
@@ -1120,6 +1125,16 @@ class SternwarteCard extends HTMLElement {
             box-shadow: 0 0 14px rgba(255, 179, 0, 0.35);
           }
         }
+        @keyframes rain-badge-blink {
+          0%, 100% {
+            opacity: 1;
+            box-shadow: 0 0 0 rgba(220, 50, 50, 0);
+          }
+          50% {
+            opacity: 0.45;
+            box-shadow: 0 0 14px rgba(220, 50, 50, 0.5);
+          }
+        }
         .controls {
           display: grid;
           grid-template-columns: repeat(3, 1fr);