no message

adventskalender/2025/content/day02.html

@@ -3,6 +3,11 @@
   <!-- TITEL -->
   <div class="popup-header">
     <h2>🎁 2. Dezember – Wenn es still wird</h2>
+    <div class="popup-tools">
+      <button id="btn-font-toggle" aria-label="Schriftart umschalten">A⇄A</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>
 
   <!-- ZWEI SPALTEN -->

adventskalender/2025/js/popup.js

@@ -158,3 +158,47 @@ window.showLockedPopup = function (day) {
 
   popupOverlay.classList.add("active");
 };
+
+// ============================================================
+// Zusatzfunktionen: Schriftart & Schriftgröße
+// ============================================================
+
+document.addEventListener("DOMContentLoaded", () => {
+
+  const popupBody = document.querySelector(".popup-body");
+
+  // --- BUTTONS ---
+  const btnFontToggle = document.getElementById("btn-font-toggle");
+  const btnFontUp     = document.getElementById("btn-font-up");
+  const btnFontDown   = document.getElementById("btn-font-down");
+
+  if (!popupBody) return;
+
+  // --- 1) Schriftart toggle ---
+  if (btnFontToggle) {
+    btnFontToggle.addEventListener("click", () => {
+      popupBody.classList.toggle("font-readable");
+    });
+  }
+
+  // --- 2) Schriftgröße anpassen ---
+  let currentScale = 1;   // 1 = normal
+
+  function applyScale() {
+    popupBody.style.fontSize = `${currentScale}em`;
+  }
+
+  if (btnFontUp) {
+    btnFontUp.addEventListener("click", () => {
+      currentScale = Math.min(currentScale + 0.1, 2);
+      applyScale();
+    });
+  }
+
+  if (btnFontDown) {
+    btnFontDown.addEventListener("click", () => {
+      currentScale = Math.max(currentScale - 0.1, 0.5);
+      applyScale();
+    });
+  }
+});

adventskalender/shared/css/popup.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   Bratonien Adventskalender – NEUE SAUBERE POPUP.CSS
+   Bratonien Adventskalender – POPUP.CSS
    ============================================================ */
 
 /* ============================================================
@@ -23,7 +23,7 @@
 }
 
 /* ============================================================
-   POPUP-BOX
+   POPUP-BOX – GLOBALER STANDARD (Pinyon)
    ============================================================ */
 
 #popup-box {
@@ -37,6 +37,10 @@
     color-mix(in srgb, var(--ci-gold) 15%, #fff9e6)
   );
 
+  font-family: "Bratonien2025", serif;     /* ← Pinyon Script als Standard */
+  font-size: 0.96em;                        /* optisch passend kompensiert */
+  line-height: 1.35;
+
   border: 2px solid var(--ci-gold);
   border-radius: 16px;
 
@@ -53,6 +57,16 @@
   color: #333;
 }
 
+/* ============================================================
+   BODY – SPÄTER UMSCHALTBAR AUF LESBARE SCHRIFT
+   ============================================================ */
+
+.popup-body.font-readable {
+  font-family: var(--ci-font-readable), serif; /* z.B. Georgia oder Cormorant */
+  font-size: 1em;
+  line-height: 1.55;
+}
+
 /* ============================================================
    CLOSE BUTTON
    ============================================================ */
@@ -73,7 +87,7 @@
   font-size: 20px;
   font-weight: bold;
   line-height: 28px;
-  color: var(--ci-darkgreen);
+  color: var(--ci-gold);
   cursor: pointer;
 
   box-shadow: 0 0 8px rgba(0,0,0,0.2);
@@ -109,8 +123,9 @@
 
 .popup-header h2 {
   margin: 0;
-  font-size: clamp(1.6rem, 2.2vw, 2.8rem);
+  font-size: clamp(1.8rem, 2.4vw, 3.2rem);
   color: var(--ci-darkgreen);
+  font-family: "Bratonien2025", serif; /* fix: Header bleibt in Pinyon */
 }
 
 /* ============================================================
@@ -123,7 +138,7 @@
   gap: clamp(1rem, 2vw, 2.5rem);
 }
 
-/* Linke Spalte (Story bleibt unverändert) */
+/* Linke Spalte */
 .story {
   line-height: 1.6;
   max-width: 70ch;
@@ -149,17 +164,16 @@
 }
 
 /* ============================================================
-   REZEPTTAG – TEXT SOLL BILD UMWERBEN
+   REZEPTTAG – BILD SOLL TEXT UMWERBEN
    ============================================================ */
 
 .popup-recipe .popup-body {
-  /* linke Spalte bleibt Grid-Item */
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(1rem, 2vw, 2.5rem);
 }
 
-/* rechte Spalte verliert Grid -> normaler Blockfluss */
+/* rechte Spalte → Blockfluss */
 .popup-recipe .popup-recipe-content {
   display: block;
   width: 100%;
@@ -184,7 +198,7 @@
   shape-outside: inset(0 round 10px);
 }
 
-/* inneres Bild: KEIN FLOAT */
+/* inneres Bild */
 .popup-recipe-content .recipe-image {
   display: block;
   width: 100%;
@@ -192,7 +206,7 @@
   border-radius: 10px;
 }
 
-/* Überschriften Zutaten/Zubereitung */
+/* Zutaten/Zubereitung */
 .popup-recipe-content h4 {
   font-size: clamp(1rem, 1.2vw, 1.4rem);
   color: var(--ci-darkgreen);
@@ -209,12 +223,12 @@
    ============================================================ */
 
 @media (max-width: 900px) {
+
   .popup-body,
   .popup-recipe .popup-body {
     grid-template-columns: 1fr;
   }
 
-  /* Bild zentriert ohne Float */
   .popup-recipe-content picture.recipe-image-wrapper {
     float: none;
     margin: 0 auto 1rem auto;
@@ -237,3 +251,38 @@
   0%   { transform: scale(.9); opacity: 0; }
   100% { transform: scale(1); opacity: 1; }
 }
+
+/* ===========================================
+   TOOLS/Buttons im Header
+   =========================================== */
+
+.popup-header {
+  position: relative;
+}
+
+.popup-tools {
+  position: absolute;
+  left: 0;            /* ← später anpassbar */
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 0.4rem;
+}
+
+.popup-tools button {
+  background: color-mix(in srgb, var(--ci-gold) 20%, #fff9e6);
+  border: 2px solid var(--ci-gold);
+  border-radius: 6px;
+  padding: 0.15rem 0.45rem;
+
+  font-family: var(--ci-font-readable), serif;
+  font-size: 0.8rem;
+  color: var(--ci-darkgreen);
+  cursor: pointer;
+
+  box-shadow: 0 0 6px rgba(0,0,0,0.15);
+}
+
+.popup-tools button:hover {
+  background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
+}