From 38a1c0aea4af00010c4f401447ab6cc54a54eb3d Mon Sep 17 00:00:00 2001
From: Thomas Dannenberg <kontakt@bratonien.de>
Date: Sat, 8 Nov 2025 10:03:06 +0000
Subject: [PATCH] adventskalender/2025/js/background.js aktualisiert

---
 adventskalender/2025/js/background.js | 38 ++++++++++++---------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/adventskalender/2025/js/background.js b/adventskalender/2025/js/background.js
index 735155e..6a4ddb2 100644
--- a/adventskalender/2025/js/background.js
+++ b/adventskalender/2025/js/background.js
@@ -19,16 +19,11 @@
   const sim = getSimulatedDay();
   if (DEV_MODE && sim) dayToShow = sim;
 
-  let padded = "Basisbild";
-  if (dayToShow >= 1 && dayToShow <= 24) {
-    padded = String(dayToShow).padStart(2, "0");
-  }
-
-  // Basename ohne Extension
-  const filename = `${padded}`;
+  const padded = (dayToShow >= 1 && dayToShow <= 24) ? String(dayToShow).padStart(2, "0") : "Basisbild";
+  const filename = padded;
   const basePath = "assets/images/";
 
-  // === Funktion zum Setzen des Favicons (.webp reicht völlig aus) ===
+  // === Favicon setzen (.webp) ===
   function setFavicon(path) {
     let link = document.querySelector('link[rel="icon"]');
     if (!link) {
@@ -47,27 +42,28 @@
 
     if (!picture || !img || !sources) return;
 
-    // Durch alle <source> durchgehen und neuen srcset setzen
+    const breakpoints = [420, 768, 1024, 1280, 1600, 1920, 2560, 3840];
+
+    // === <source> für AVIF und WebP aktualisieren ===
     sources.forEach(source => {
       const type = source.getAttribute("type");
       const format = type?.split("/")[1]; // "avif" oder "webp"
       if (!format) return;
 
-      const newSrcset = [
-        `assets/images/420/${format}/${filename}.${format} 420w`,
-        `assets/images/768/${format}/${filename}.${format} 768w`,
-        `assets/images/1024/${format}/${filename}.${format} 1024w`,
-        `assets/images/1280/${format}/${filename}.${format} 1280w`,
-        `assets/images/1600/${format}/${filename}.${format} 1600w`,
-        `assets/images/1920/${format}/${filename}.${format} 1920w`,
-        `assets/images/2560/${format}/${filename}.${format} 2560w`,
-        `assets/images/3840/${format}/${filename}.${format} 3840w`,
-      ].join(", ");
+      const newSrcset = breakpoints
+        .map(bp => `assets/images/${bp}/${format}/${filename}.${format} ${bp}w`)
+        .join(", ");
       source.setAttribute("srcset", newSrcset);
     });
 
-    // JPEG für <img>-Fallback
-    img.src = `assets/images/1920/jpeg/${filename}.jpg`;
+    // === <img> (JPEG-Fallback) responsiv setzen ===
+    const jpegSrcset = breakpoints
+      .map(bp => `assets/images/${bp}/jpeg/${filename}.jpg ${bp}w`)
+      .join(", ");
+
+    img.setAttribute("src", `assets/images/1920/jpeg/${filename}.jpg`);
+    img.setAttribute("srcset", jpegSrcset);
+    img.setAttribute("sizes", "100vw");
 
     console.log(`[Bratonien] Kalenderbild gesetzt für Tag ${filename}`);
     setFavicon(`${basePath}${filename}.webp`);