RFID message ins backend geht, websocket fürs frontend

data/index.css

@@ -150,6 +150,35 @@ html {
         color: #fff;
       }
 
+      .swimmer-name {
+        font-size: clamp(1.5rem, 3.5vw, 2.2rem);
+        font-weight: bold;
+        margin-bottom: clamp(15px, 2vh, 25px);
+        padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 18px);
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 15px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        color: #fff;
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(5px);
+        animation: fadeIn 0.5s ease-in;
+        text-align: center;
+        word-wrap: break-word;
+        line-height: 1.2;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(-10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
       .time-display {
         font-size: clamp(3rem, 9vw, 10rem);
         font-weight: bold;
@@ -280,6 +309,11 @@ html {
         body {
           padding: 10px;
         }
+
+        .swimmer-name {
+          font-size: clamp(1.2rem, 4vw, 1.8rem);
+          margin-bottom: clamp(10px, 1.5vh, 20px);
+        }
       }
 
       @media (max-width: 480px) {
@@ -299,4 +333,9 @@ html {
         .timer-container {
           padding: 0 2vw;
         }
-    }
+
+        .swimmer-name {
+          font-size: clamp(1rem, 4vw, 1.5rem);
+          padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 12px);
+        }
+      }