No message

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>
     
-  <!-- === Hauptbereich mit zwei Spalten === -->
+  <!-- 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>
+
   <div class="popup-body">
     <!-- Linke Spalte: Story (dein bisheriger Text 1:1 übernommen) -->
     <div class="story">

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 -->

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);
@@ -296,3 +296,42 @@ display: flex;
 .popup-tools button:hover {
   background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
 }
+
+/* ============================================================
+   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;
+}

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">

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 -->
-         LINKE SPALTE – DEIN TEXT
-         ================================ -->
     <div class="story">
-      <!-- HIER DEIN TEXT -->
+      <!-- DEIN TEXT -->
     </div>
 
-    <!-- ================================
+    <!-- RECHTE SPALTE -->
-         RECHTE SPALTE – BILD (RESPONSIV)
+    <div class="addon addon-picture">
-         ================================ -->
-    <div class="addon">
 
-      <!-- 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"
+          class="addon-picture-image"
-          decoding="async"
-          loading="lazy"
         >
 
       </picture>
 
     </div>
-  </div>
 
+  </div>
 </section>

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>

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/1366/jpeg/Basisbild.jpeg">
-        poster="/2025/assets/images/dayXX/1024/jpeg/BILD.jpg"
       >
 
         <!-- WEBM -->