refactor: Header neu strukturiert – TALAS-Logo und Meldestation responsive optimiert

- Littwin-Logo unverändert beibehalten (unten links)
- TALAS-Logo und Meldestation zusammen im flex-Container
- Ab laptop-Breakpoint kleinere Schrift und kleineres Logo
- Keine absolute Positionierung mehr für TALAS-Logo + Text
- Layout stabil für verschiedene Bildschirmgrößen

components/header/Header.tsx

@@ -85,18 +85,24 @@ function Header() {
           priority={false}
         />
       </div>
-      {/* Stationsname & Device Name */}
-      <div
-        className="absolute transform -translate-y-1/2
-                left-[23%] sm:left-[20%] md:left-[21%] lg:left-[22%] xl:left-[23%]
-                top-[50%] flex flex-col justify-center space-y-1"
-      >
-        <h2 className="text-lg sm:text-sm md:text-base lg:text-lg xl:text-xl font-bold">
-          Meldestation
-        </h2>
-        <p className="text-gray-600 text-base sm:text-sm md:text-base lg:text-lg xl:text-xl">
-          {deviceName}
-        </p>
+      {/* TALAS-Logo + Text nebeneinander (flexibel oben links) */}
+      <div className="flex items-center  transform   translate-x-3/4 mt-8 laptop:ml-10 laptop:translate-y-1 laptop:mt-4">
+        <Image
+          src="/images/logo-talas-2024.png"
+          alt="TALAS Logo"
+          className="object-contain w-[120px] laptop:w-[80px] xl:w-[140px] 2xl:w-[180px]"
+          width={160}
+          height={60}
+          priority
+        />
+        <div className="flex flex-col leading-tight">
+          <h2 className="text-xl laptop:text-base xl:text-lg font-bold">
+            Meldestation
+          </h2>
+          <p className="text-gray-600 text-lg laptop:text-sm xl:text-base">
+            {deviceName}
+          </p>
+        </div>
       </div>
 
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
@@ -111,23 +117,6 @@ function Header() {
           </button>
           */}
         </div>
-        {/* Logo in der Mitte */}
-        <div className="absolute top-[10%] left-1/2 transform -translate-x-1/2">
-          <Image
-            src="/images/logo-talas-2024.png"
-            alt="TALAS Logo"
-            className="
-      object-contain 
-      w-[120px] h-auto 
-      laptop:w-[180px] 
-      xl:w-[220px] 
-      2xl:w-[260px]
-    "
-            width={260}
-            height={80}
-            priority
-          />
-        </div>
 
         {/* Logout-Button */}