Header Large style 1280 x 720

components/Header.jsx

@@ -49,36 +49,50 @@ function Header() {
   }, [isAdminLoggedIn]);
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-[14vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[14vh] relative text-black">
-      <div className="absolute left-32 top-32 transform -translate-y-1/2">
+      <div
+        className="absolute transform -translate-y-1/2 
+                left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[8%]
+                top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
+        style={{
+          height: "13vh", // Dynamische Höhe des Containers
+          width: "auto",
+          aspectRatio: "1", // Beibehaltung des Seitenverhältnisses
+        }}
+      >
         <Image
           src="/images/Logo.png"
           alt="Logo"
-          width={80}
+          fill
-          height={80}
+          sizes="(max-width: 640px) 7vh, (max-width: 1024px) 8vh, (max-width: 1280px) 9vh, 10vh"
-          style={{ width: "auto", height: "auto" }}
+          className="object-contain"
           priority={false}
         />
       </div>
-      <div className="w-64 flex-shrink-0 h-full mt-24 "></div>
+      {/* Stationsname & Device Name */}
-
+      <div
-      <div className="flex items-start space-x-4 w-full">
+        className="absolute transform -translate-y-1/2
-        <div className="flex flex-col text-left pl-8">
+                left-[23%] sm:left-[20%] md:left-[21%] lg:left-[22%] xl:left-[23%]
-          <h2 className="text-base">Stationsname</h2>
+                top-[50%] flex flex-col justify-center space-y-1"
-          <p className="text-base text-gray-600">{deviceName}</p>
+      >
-        </div>
+        <h2 className="text-lg sm:text-sm md:text-base lg:text-lg xl:text-xl font-bold">
+          Stationsname
+        </h2>
+        <p className="text-gray-600 text-base sm:text-sm md:text-base lg:text-lg xl:text-xl">
+          {deviceName}
+        </p>
       </div>
 
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
         <div className="flex items-center justify-end w-full">
           <button
             onClick={handleSettingsClick}
-            className="text-3xl text-black mr-7"
+            className="text-3xl text-black mr-0"
           >
             <i className="bi bi-gear"></i>
           </button>
         </div>
-        <div className="flex items-center justify-end w-full space-x-2">
+        <div className="flex items-center justify-end w-1/4 space-x-1">
           <button
             onClick={handleLogout}
             className="bg-littwin-blue text-white px-4 py-2 rounded"