From 3b63510f9768daf6bc8dbf517767d114634516f3 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 29 Apr 2025 13:23:26 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20Header=20neu=20strukturiert=20?=
 =?UTF-8?q?=E2=80=93=20TALAS-Logo=20und=20Meldestation=20responsive=20opti?=
 =?UTF-8?q?miert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 47 ++++++++++++++----------------------
 config/webVersion.ts         |  2 +-
 2 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index 3fc497c..11f6bfc 100644
--- a/components/header/Header.tsx
+++ b/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 */}
 
diff --git a/config/webVersion.ts b/config/webVersion.ts
index 442cf58..4b857fb 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.308";
+const webVersion = "1.6.309";
 export default webVersion;