diff --git a/adventskalender/2025/content/day02.html b/adventskalender/2025/content/day02.html
index 690c797..9402534 100644
--- a/adventskalender/2025/content/day02.html
+++ b/adventskalender/2025/content/day02.html
@@ -3,6 +3,11 @@
diff --git a/adventskalender/2025/js/popup.js b/adventskalender/2025/js/popup.js
index 880fa89..94be88a 100644
--- a/adventskalender/2025/js/popup.js
+++ b/adventskalender/2025/js/popup.js
@@ -157,4 +157,48 @@ window.showLockedPopup = function (day) {
`;
popupOverlay.classList.add("active");
-};
\ No newline at end of file
+};
+
+// ============================================================
+// 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();
+ });
+ }
+});
\ No newline at end of file
diff --git a/adventskalender/shared/css/popup.css b/adventskalender/shared/css/popup.css
index f3dcc9e..86b562c 100644
--- a/adventskalender/shared/css/popup.css
+++ b/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;
@@ -236,4 +250,39 @@
@keyframes popIn {
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);
}
\ No newline at end of file