From 46308b81437de62d38c5576e0cac9a3eef400376 Mon Sep 17 00:00:00 2001
From: Bratonien Cosplay <kontakt@bratonien.de>
Date: Sun, 16 Nov 2025 00:21:52 +0100
Subject: [PATCH] No message

---
 adventskalender/2025/content/day01.html | 16 ++++++---
 adventskalender/2025/content/day02.html | 18 +++++-----
 adventskalender/shared/css/popup.css    | 45 +++++++++++++++++++++++--
 templates/audio.txt                     | 13 +++++--
 templates/picture.txt                   | 33 +++++++++---------
 templates/recipe.txt                    | 43 ++++++++++++-----------
 templates/video.txt                     | 17 +++++++---
 7 files changed, 125 insertions(+), 60 deletions(-)

diff --git a/adventskalender/2025/content/day01.html b/adventskalender/2025/content/day01.html
index efd7346..1e6a36b 100644
--- a/adventskalender/2025/content/day01.html
+++ b/adventskalender/2025/content/day01.html
@@ -1,10 +1,16 @@
 <section class="popup-day popup-3part day01">
-  <!-- === Titelzeile === -->
-  <header class="popup-header">
-    <h2>🎁 1. Dezember – Der Anfang vom Zauber</h2>
-  </header>
+    
+  <!-- HEADER + BUTTONS -->
+  <div class="popup-header">
+    <h2><🎁 1. Dezember – Der Anfang vom Zauber</h2>
+
+    <div class="popup-tools">
+      <button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
+      <button id="btn-font-up">A+</button>
+      <button id="btn-font-down">A−</button>
+    </div>
+  </div>
 
-  <!-- === Hauptbereich mit zwei Spalten === -->
   <div class="popup-body">
     <!-- Linke Spalte: Story (dein bisheriger Text 1:1 übernommen) -->
     <div class="story">
diff --git a/adventskalender/2025/content/day02.html b/adventskalender/2025/content/day02.html
index df46f6a..efcf5e6 100644
--- a/adventskalender/2025/content/day02.html
+++ b/adventskalender/2025/content/day02.html
@@ -91,7 +91,7 @@
 
 
     <!-- ============================
-         RECHTE SPALTE – REZEPT
+         RECHTE SPALTE – Basisbild
          ============================ -->
     <div class="addon popup-recipe-content">
 
@@ -110,9 +110,10 @@
             /2025/assets/images/1024/avif/Basisbild.avif 1024w,
             /2025/assets/images/1366/avif/Basisbild.avif 1366w,
             /2025/assets/images/1600/avif/Basisbild.avif 1600w,
-            /2025/assets/images/1920/avif/Basisbild.avif 1920w
+            /2025/assets/images/1920/avif/Basisbild.avif 1920w,
+            /2025/assets/images/2560/avif/Basisbild.avif 2560w,
+            /2025/assets/images/3840/avif/Basisbild.avif 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
         >
 
         <!-- WEBP -->
@@ -124,9 +125,10 @@
             /2025/assets/images/1024/webp/Basisbild.webp 1024w,
             /2025/assets/images/1366/webp/Basisbild.webp 1366w,
             /2025/assets/images/1600/webp/Basisbild.webp 1600w,
-            /2025/assets/images/1920/webp/Basisbild.webp 1920w
+            /2025/assets/images/1920/webp/Basisbild.webp 1920w,
+            /2025/assets/images/2560/webp/Basisbild.webp 2560w,
+            /2025/assets/images/3840/webp/Basisbild.webp 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
         >
 
         <!-- JPEG -->
@@ -138,15 +140,15 @@
             /2025/assets/images/1024/jpeg/Basisbild.jpg 1024w,
             /2025/assets/images/1366/jpeg/Basisbild.jpg 1366w,
             /2025/assets/images/1600/jpeg/Basisbild.jpg 1600w,
-            /2025/assets/images/1920/jpeg/Basisbild.jpg 1920w
+            /2025/assets/images/1920/jpeg/Basisbild.jpg 1920w,
+            /2025/assets/images/2560/jpeg/Basisbild.jpg 2560w,
+            /2025/assets/images/3840/jpeg/Basisbild.jpg 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
           alt="Rezeptbild"
           class="recipe-image"
           decoding="async"
           loading="lazy"
         >
-
       </picture>
 
       <!-- Zutaten -->
diff --git a/adventskalender/shared/css/popup.css b/adventskalender/shared/css/popup.css
index e2bc1ad..dcd61ae 100644
--- a/adventskalender/shared/css/popup.css
+++ b/adventskalender/shared/css/popup.css
@@ -191,7 +191,7 @@
 /* Bild floaten lassen */
 .popup-recipe-content picture.recipe-image-wrapper {
   float: left;
-  width: clamp(200px, 40%, 330px);
+  width: clamp(260px, 70%, 3840px);
   margin: 0 1.5rem 1.2rem 0;
   border-radius: 10px;
   display: block;
@@ -279,7 +279,7 @@
   padding: 0.15rem 0.45rem;
 
   font-family: var(--ci-font-readable), serif;
-  font-size: 1.05rem;
+  font-size: 1.3rem;
   font-weight: 600;
   letter-spacing: 0.3px;
   color: var(--ci-darkgreen);
@@ -295,4 +295,43 @@ display: flex;
 
 .popup-tools button:hover {
   background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
-}
\ No newline at end of file
+}
+
+/* ============================================================
+   ADDON – PICTURE-VORLAGE
+   ============================================================ */
+
+.addon-picture {
+  display: flex;
+  justify-content: center;
+}
+
+.addon-picture-image {
+  width: 90%;
+  height: auto;
+  display: block;
+}
+
+
+.addon-audio {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.addon-audio audio {
+  width: 100%;
+  max-width: 700px;        /* gleiche Breite wie andere Addons */
+}
+
+.addon-video-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.addon-video {
+  width: 90%;
+  height: auto;
+  display: block;
+}
diff --git a/templates/audio.txt b/templates/audio.txt
index ce1b3f7..e5df854 100644
--- a/templates/audio.txt
+++ b/templates/audio.txt
@@ -3,9 +3,16 @@
   <!-- TITEL -->
   <div class="popup-header">
     <h2><!-- TITEL DES TAGES --></h2>
+
+    <!-- TOOL-BUTTONS -->
+    <div class="popup-tools">
+      <button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
+      <button id="btn-font-up">A+</button>
+      <button id="btn-font-down">A−</button>
+    </div>
   </div>
 
-  <!-- 2 SPALTEN -->
+  <!-- ZWEI SPALTEN -->
   <div class="popup-body">
 
     <!-- ================================
@@ -16,9 +23,9 @@
     </div>
 
     <!-- ================================
-         RECHTE SPALTE – SOUND
+         RECHTE SPALTE – AUDIO
          ================================ -->
-    <div class="addon">
+    <div class="addon addon-audio-wrapper">
 
       <audio controls preload="auto" class="addon-audio">
         <source src="/2025/assets/sounds/SOUND.mp3" type="audio/mpeg">
diff --git a/templates/picture.txt b/templates/picture.txt
index c02c04b..c898ec7 100644
--- a/templates/picture.txt
+++ b/templates/picture.txt
@@ -3,27 +3,28 @@
      ============================================ -->
 <section class="popup-day popup-3part">
 
-  <!-- TITEL -->
+  <!-- TITEL + BUTTONS -->
   <div class="popup-header">
     <h2><!-- TITEL DES TAGES --></h2>
+
+    <div class="popup-tools">
+      <button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
+      <button id="btn-font-up">A+</button>
+      <button id="btn-font-down">A−</button>
+    </div>
   </div>
 
   <!-- 2 SPALTEN -->
   <div class="popup-body">
 
-    <!-- ================================
-         LINKE SPALTE – DEIN TEXT
-         ================================ -->
+    <!-- LINKE SPALTE -->
     <div class="story">
-      <!-- HIER DEIN TEXT -->
+      <!-- DEIN TEXT -->
     </div>
 
-    <!-- ================================
-         RECHTE SPALTE – BILD (RESPONSIV)
-         ================================ -->
-    <div class="addon">
+    <!-- RECHTE SPALTE -->
+    <div class="addon addon-picture">
 
-      <!-- RESPONSIVES BILD -->
       <picture>
 
         <!-- AVIF -->
@@ -39,7 +40,7 @@
             /2025/assets/images/dayXX/2560/avif/BILD.avif 2560w,
             /2025/assets/images/dayXX/3840/avif/BILD.avif 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
+          sizes="90vw"
         >
 
         <!-- WEBP -->
@@ -55,7 +56,7 @@
             /2025/assets/images/dayXX/2560/webp/BILD.webp 2560w,
             /2025/assets/images/dayXX/3840/webp/BILD.webp 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
+          sizes="90vw"
         >
 
         <!-- JPEG -->
@@ -71,16 +72,14 @@
             /2025/assets/images/dayXX/2560/jpeg/BILD.jpg 2560w,
             /2025/assets/images/dayXX/3840/jpeg/BILD.jpg 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
+          sizes="90vw"
           alt="Bild zum Tag"
-          class="addon-image"
-          decoding="async"
-          loading="lazy"
+          class="addon-picture-image"
         >
 
       </picture>
 
     </div>
-  </div>
 
+  </div>
 </section>
\ No newline at end of file
diff --git a/templates/recipe.txt b/templates/recipe.txt
index 93b669b..767b410 100644
--- a/templates/recipe.txt
+++ b/templates/recipe.txt
@@ -3,28 +3,34 @@
   <!-- TITEL -->
   <div class="popup-header">
     <h2><!-- TITEL HIER --></h2>
+
+    <!-- TOOLS: Schriftart & Schriftgröße -->
+    <div class="popup-tools">
+      <button id="btn-font-toggle" aria-label="Schriftart umschalten">Aa ↔ &#x1D49C;</button>
+      <button id="btn-font-up" aria-label="Schrift vergrößern">A+</button>
+      <button id="btn-font-down" aria-label="Schrift verkleinern">A−</button>
+    </div>
   </div>
 
-  <!-- HAUPTBEREICH -->
+  <!-- ZWEI-SPALTEN-LAYOUT -->
   <div class="popup-body">
 
     <!-- =====================================
          LINKE SPALTE – STORYTEXT
          ===================================== -->
     <div class="story">
-      <!-- DEIN STORYTEXT HIER REIN -->
+      <!-- DEIN STORYTEXT -->
     </div>
 
-
     <!-- =====================================
-         RECHTE SPALTE – REZEPT (mit responsivem Bild)
+         RECHTE SPALTE – REZEPT
          ===================================== -->
     <div class="addon popup-recipe-content">
 
-      <!-- REZEPTNAME -->
+      <!-- Rezeptname -->
       <h3 class="recipe-title"><!-- Rezeptname --></h3>
 
-      <!-- RESPONSIVES REZEPTBILD -->
+      <!-- RESPONSIVES BILD -->
       <picture class="recipe-image-wrapper">
 
         <!-- AVIF -->
@@ -36,9 +42,10 @@
             /2025/assets/images/rezepte/1024/avif/REZEPT.avif 1024w,
             /2025/assets/images/rezepte/1366/avif/REZEPT.avif 1366w,
             /2025/assets/images/rezepte/1600/avif/REZEPT.avif 1600w,
-            /2025/assets/images/rezepte/1920/avif/REZEPT.avif 1920w
+            /2025/assets/images/rezepte/1920/avif/REZEPT.avif 1920w,
+            /2025/assets/images/rezepte/2560/avif/REZEPT.avif 2560w,
+            /2025/assets/images/rezepte/3840/avif/REZEPT.avif 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
         >
 
         <!-- WEBP -->
@@ -50,12 +57,13 @@
             /2025/assets/images/rezepte/1024/webp/REZEPT.webp 1024w,
             /2025/assets/images/rezepte/1366/webp/REZEPT.webp 1366w,
             /2025/assets/images/rezepte/1600/webp/REZEPT.webp 1600w,
-            /2025/assets/images/rezepte/1920/webp/REZEPT.webp 1920w
+            /2025/assets/images/rezepte/1920/webp/REZEPT.webp 1920w,
+            /2025/assets/images/rezepte/2560/webp/REZEPT.webp 2560w,
+            /2025/assets/images/rezepte/3840/webp/REZEPT.webp 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
         >
 
-        <!-- JPEG Fallback -->
+        <!-- JPEG -->
         <img
           src="/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg"
           srcset="
@@ -64,32 +72,29 @@
             /2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg 1024w,
             /2025/assets/images/rezepte/1366/jpeg/REZEPT.jpg 1366w,
             /2025/assets/images/rezepte/1600/jpeg/REZEPT.jpg 1600w,
-            /2025/assets/images/rezepte/1920/jpeg/REZEPT.jpg 1920w
+            /2025/assets/images/rezepte/1920/jpeg/REZEPT.jpg 1920w,
+            /2025/assets/images/rezepte/2560/jpeg/REZEPT.jpg 2560w,
+            /2025/assets/images/rezepte/3840/jpeg/REZEPT.jpg 3840w
           "
-          sizes="(max-width: 900px) 100vw, 40vw"
           alt="Rezeptbild"
           class="recipe-image"
           decoding="async"
           loading="lazy"
         >
-
       </picture>
 
-
       <!-- Zutaten -->
       <h4>Zutaten</h4>
       <ul>
-        <!-- Zutaten -->
+        <!-- Zutatenliste -->
       </ul>
 
       <!-- Zubereitung -->
       <h4>Zubereitung</h4>
       <p>
-        <!-- Zubereitung -->
+        <!-- Zubereitungstext -->
       </p>
 
     </div>
-
   </div>
-
 </section>
\ No newline at end of file
diff --git a/templates/video.txt b/templates/video.txt
index ff99c4f..189f54b 100644
--- a/templates/video.txt
+++ b/templates/video.txt
@@ -3,8 +3,15 @@
      ============================================ -->
 <section class="popup-day popup-3part">
 
+  <!-- HEADER + BUTTONS -->
   <div class="popup-header">
     <h2><!-- TITEL DES TAGES --></h2>
+
+    <div class="popup-tools">
+      <button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
+      <button id="btn-font-up">A+</button>
+      <button id="btn-font-down">A−</button>
+    </div>
   </div>
 
   <div class="popup-body">
@@ -15,15 +22,15 @@
     </div>
 
     <!-- VIDEO -->
-    <div class="addon">
+    <div class="addon addon-video-wrapper">
       <video
+        class="thumbkino-video"
         autoplay
-        playsinline
-        muted
         loop
+        muted
+        playsinline
         preload="auto"
-        class="addon-video"
-        poster="/2025/assets/images/dayXX/1024/jpeg/BILD.jpg"
+        poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg">
       >
 
         <!-- WEBM -->