From 04dede84e0b7b6d68798ef5c69944681fb4ab74c Mon Sep 17 00:00:00 2001
From: Bratonien Cosplay <kontakt@bratonien.de>
Date: Fri, 14 Nov 2025 21:44:09 +0100
Subject: [PATCH] no message

---
 adventskalender/2025/content/day02.html |   2 +-
 adventskalender/2025/index.php          |  14 +-
 adventskalender/shared/css/popup.css    | 362 +++++++-----------------
 3 files changed, 108 insertions(+), 270 deletions(-)

diff --git a/adventskalender/2025/content/day02.html b/adventskalender/2025/content/day02.html
index 45d3c11..690c797 100644
--- a/adventskalender/2025/content/day02.html
+++ b/adventskalender/2025/content/day02.html
@@ -62,7 +62,7 @@
 
 <p>
   Erna stand derweil in der großen Halle, zündete die Kerzen auf dem Kranz erneut an –  
-  und saw zu, wie die mittlere fast sofort wieder verlosch.  
+  und sah zu, wie die mittlere fast sofort wieder verlosch.  
   Kein Luftzug, kein Knacken, kein sichtbarer Grund.  
   Nur ein leiser, harmloser Tod der Flamme.  
   Beim zweiten Versuch blieb sie an.  
diff --git a/adventskalender/2025/index.php b/adventskalender/2025/index.php
index 220fd21..8b0d41b 100644
--- a/adventskalender/2025/index.php
+++ b/adventskalender/2025/index.php
@@ -36,7 +36,7 @@
             assets/images/420/avif/Basisbild.avif 420w,
             assets/images/768/avif/Basisbild.avif 768w,
             assets/images/1024/avif/Basisbild.avif 1024w,
-            assets/images/1280/avif/Basisbild.avif 1280w,
+            assets/images/1366/avif/Basisbild.avif 1366w,
             assets/images/1600/avif/Basisbild.avif 1600w,
             assets/images/1920/avif/Basisbild.avif 1920w,
             assets/images/2560/avif/Basisbild.avif 2560w,
@@ -46,7 +46,7 @@
             (min-width: 2560px) 2560px,
             (min-width: 1920px) 1920px,
             (min-width: 1600px) 1600px,
-            (min-width: 1280px) 1280px,
+            (min-width: 1366px) 1366px,
             100vw">
 
         <!-- WebP -->
@@ -56,7 +56,7 @@
             assets/images/420/webp/Basisbild.webp 420w,
             assets/images/768/webp/Basisbild.webp 768w,
             assets/images/1024/webp/Basisbild.webp 1024w,
-            assets/images/1280/webp/Basisbild.webp 1280w,
+            assets/images/1366/webp/Basisbild.webp 1366w,
             assets/images/1600/webp/Basisbild.webp 1600w,
             assets/images/1920/webp/Basisbild.webp 1920w,
             assets/images/2560/webp/Basisbild.webp 2560w,
@@ -66,17 +66,17 @@
             (min-width: 2560px) 2560px,
             (min-width: 1920px) 1920px,
             (min-width: 1600px) 1600px,
-            (min-width: 1280px) 1280px,
+            (min-width: 1366px) 1366px,
             100vw">
 
         <!-- JPEG-Fallback -->
         <img
-          src="assets/images/1280/jpeg/Basisbild.jpg"
+          src="assets/images/1366/jpeg/Basisbild.jpg"
           srcset="
             assets/images/420/jpeg/Basisbild.jpg 420w,
             assets/images/768/jpeg/Basisbild.jpg 768w,
             assets/images/1024/jpeg/Basisbild.jpg 1024w,
-            assets/images/1280/jpeg/Basisbild.jpg 1280w,
+            assets/images/1366/jpeg/Basisbild.jpg 1366w,
             assets/images/1600/jpeg/Basisbild.jpg 1600w,
             assets/images/1920/jpeg/Basisbild.jpg 1920w,
             assets/images/2560/jpeg/Basisbild.jpg 2560w,
@@ -86,7 +86,7 @@
             (min-width: 2560px) 2560px,
             (min-width: 1920px) 1920px,
             (min-width: 1600px) 1600px,
-            (min-width: 1280px) 1280px,
+            (min-width: 1366px) 1366px,
             100vw"
           alt="Bratonien Adventskalender 2025"
           decoding="async"
diff --git a/adventskalender/shared/css/popup.css b/adventskalender/shared/css/popup.css
index 8988fbb..4cc59a3 100644
--- a/adventskalender/shared/css/popup.css
+++ b/adventskalender/shared/css/popup.css
@@ -1,16 +1,13 @@
 /* ============================================================
-   Bratonien Adventskalender 2025 – Popup Design
-   Bandbreitenoptimiert, hell & festlich
-   Layouts: Standard, 3-Part (Story+Media), Recipe (Text+Bild)
+   Bratonien Adventskalender – SAUBERE POPUP.CSS
    ============================================================ */
 
 /* === Overlay === */
 #popup-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(247, 243, 232, 0.88);
+  background: rgba(247,243,232,0.88);
   backdrop-filter: blur(6px) brightness(1.05);
-  -webkit-backdrop-filter: blur(6px) brightness(1.05);
   display: none;
   align-items: center;
   justify-content: center;
@@ -31,345 +28,186 @@
   );
   border: 2px solid var(--ci-gold);
   border-radius: 16px;
-  box-shadow:
-    0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
-    inset 0 0 10px rgba(255, 255, 255, 0.4);
-
-  /* neue, ausgewogenere Breite */
-  width: min(95vw, 2000px);
+  width: min(95vw, 1800px);
   max-height: 90vh;
 
   overflow-y: auto;
   overflow-x: hidden;
 
-  /* leicht reduziertes Padding */
   padding: clamp(1rem, 1.5vw, 2rem);
+  box-shadow: 
+    0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
+    inset 0 0 10px rgba(255,255,255,0.4);
 
-  color: #333;
-  text-align: center;
-  position: relative;
-  backdrop-filter: blur(3px);
-  transition: width 0.3s ease, padding 0.3s ease;
-  animation: popIn 0.35s ease;
-  box-sizing: border-box;
+  animation: popIn .35s ease;
+  color:#333;
+  box-sizing:border-box;
 }
 
-/* ab sehr großen Bildschirmen: mehr Weite, weniger Rahmen */
-@media (min-width: 1800px) {
-  #popup-box {
-    width: 85vw;
-    padding: 1.2rem 2rem;
-  }
-}
-
-/* === Grundlayout für Inhalte === */
+/* === Hauptcontainer === */
 #popup-content {
-  margin-top: 1rem;
-  font-family: "Bratonien2025", cursive;
-  font-size: clamp(1rem, 1.2vw, 1.5rem);
-  line-height: 1.6;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: clamp(1rem, 2vw, 2.5rem);
+  gap: clamp(1rem,2vw,2.5rem);
 }
 
 /* ============================================================
-   DREITEILIGES POPUP-LAYOUT (Titel / Story / Inhalt)
+   TITELZEILE
    ============================================================ */
-
-.popup-day.popup-3part {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(1rem, 2vw, 2.5rem);
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  text-align: left;
-}
-
-/* --- Titelzeile --- */
 .popup-header {
   text-align: center;
   border-bottom: 2px solid var(--ci-gold);
-  padding-bottom: 0.5rem;
+  padding-bottom: .5rem;
 }
 
 .popup-header h2 {
-  font-size: clamp(1.5rem, 2vw, 2.5rem);
-  color: var(--ci-darkgreen);
   margin: 0;
+  font-size: clamp(1.6rem, 2.2vw, 2.8rem);
+  color: var(--ci-darkgreen);
 }
 
-/* --- Hauptbereich mit zwei Spalten --- */
+/* ============================================================
+   ZWEI SPALTEN – Standardlayout für ALLE Tage
+   ============================================================ */
+
 .popup-body {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: clamp(1rem, 2vw, 2rem);
-  align-items: start;
+  gap: clamp(1rem, 2vw, 2.5rem);
 }
 
-.popup-body .story {
-  max-width: 70ch;
+.story {
   line-height: 1.6;
-  color: #333;
+  max-width: 70ch;
 }
 
-.popup-body .addon {
+/* Addon rechts */
+.addon {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-direction: column;
+  gap: clamp(1rem, 1.5vw, 2rem);
+  align-items: flex-start;
 }
 
-/* === Medien im 3-Part Layout === */
-.popup-3part .popup-body .addon video,
-.popup-3part .popup-body .addon img {
+.addon img,
+.addon video {
   width: 100%;
-  max-width: clamp(300px, 40vw, 700px);
+  max-width: 700px;
   height: auto;
   border-radius: 10px;
+  background:#000;
   object-fit: contain;
-  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
-  background: #000;
+  box-shadow: 0 0 12px rgba(0,0,0,0.25);
 }
 
-/* --- Mobile Ansicht: einspaltig --- */
+/* ============================================================
+   MOBILE
+   ============================================================ */
 @media (max-width: 900px) {
   .popup-body {
     grid-template-columns: 1fr;
   }
-  .popup-day.popup-3part {
-    text-align: center;
-  }
-  .popup-body .addon {
-    margin-top: 1rem;
-  }
-  .popup-3part .popup-body .addon video,
-  .popup-3part .popup-body .addon img {
-    max-width: 100%;
-    width: 100%;
+  .addon {
+    align-items: center;
   }
 }
 
 /* ============================================================
-   REZEPT-LAYOUT (Text mit umflossenem Bild)
+   AUDIOPLAYER (edel-bretonisch)
+   ============================================================ */
+
+.addon-audio {
+  width: 100%;
+  max-width: 420px;
+  background: color-mix(in srgb, var(--ci-creamwhite) 90%, white);
+  border: 2px solid var(--ci-gold);
+  padding: .8rem;
+  border-radius: 12px;
+  box-shadow:
+    0 0 10px color-mix(in srgb, var(--ci-gold) 35%, transparent),
+    inset 0 0 5px rgba(255,255,255,0.4);
+}
+
+.addon-audio::-webkit-media-controls-panel {
+  background: color-mix(in srgb, var(--ci-creamwhite) 92%, #fff) !important;
+}
+
+/* ============================================================
+   REZEPTTAG – rechte Spalte: "Rezeptbuch" Stil
    ============================================================ */
 
 .popup-recipe .popup-body {
-  display: block;
-  column-count: 2;
-  column-gap: clamp(1.5rem, 3vw, 3rem);
-  text-align: justify;
+  /* gleiche Grid-Basis, aber mit speziellem Innenlayout */
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1rem, 2vw, 2.5rem);
 }
 
-.popup-recipe .popup-body img.recipe-image {
+/* rechte Spalte */
+.popup-recipe-content {
+  position: relative;
+  width: 100%;
+}
+
+/* Rezepttitel */
+.recipe-title {
+  font-size: clamp(1.3rem,1.6vw,2rem);
+  color: var(--ci-darkgreen);
+  font-weight: 600;
+  margin-bottom: .8rem;
+}
+
+/* Bild floatet INNERHALB der rechten Spalte */
+.popup-recipe-content .recipe-image {
   float: left;
-  width: clamp(240px, 30%, 380px);
-  margin: 0 1.5rem 1rem 0;
+  width: clamp(200px, 40%, 330px);
+  margin: 0 1.5rem 1.2rem 0;
   border-radius: 10px;
-  box-shadow: 0 0 8px rgba(0,0,0,0.15);
   shape-outside: inset(0 round 10px);
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
 }
 
-.popup-recipe .popup-body h3 {
-  column-span: all;
-  font-size: clamp(1.2rem, 1.6vw, 1.8rem);
+/* h4: Zutaten + Zubereitung */
+.popup-recipe-content h4 {
+  font-size: clamp(1rem,1.2vw,1.4rem);
+  margin: 0.8rem 0 .4rem 0;
   color: var(--ci-darkgreen);
-  margin: 1rem 0 0.5rem 0;
 }
 
-.popup-recipe .popup-body ul,
-.popup-recipe .popup-body ol {
-  margin: 0 0 1rem 1.5rem;
-  padding: 0;
-  line-height: 1.6;
+.popup-recipe-content ul,
+.popup-recipe-content ol {
+  margin-left: 1.2rem;
 }
 
-.popup-recipe .popup-body li {
-  break-inside: avoid;
-}
 
-/* --- Mobile Ansicht: Rezept einspaltig --- */
-@media (max-width: 900px) {
+
+/* --- Mobile: kein float --- */
+@media (max-width:900px) {
   .popup-recipe .popup-body {
-    column-count: 1;
+    grid-template-columns: 1fr;
   }
-  .popup-recipe .popup-body img.recipe-image {
+  .popup-recipe-content .recipe-image {
     float: none;
-    display: block;
     margin: 0 auto 1rem auto;
+    display: block;
     width: 100%;
-    max-width: 500px;
+    max-width: 350px;
   }
 }
 
-/* Rezeptname (z. B. „Vanillekipferl“) */
-.popup-recipe .recipe-title {
-  font-size: clamp(1.3rem, 1.6vw, 2rem);
-  color: var(--ci-darkgreen);
-  margin: 0 0 0.8rem 0;
-  text-align: left;
-  font-weight: 600;
-}
-
-/* Zutaten & Zubereitung kleiner (h4) */
-.popup-recipe .popup-body h4 {
-  font-size: clamp(1rem, 1.2vw, 1.4rem);
-  margin: 1rem 0 0.5rem 0;
-  color: var(--ci-darkgreen);
-  font-weight: 600;
-}
-
 /* ============================================================
-   Allgemeine Gestaltung & Animationen
+   Animationen
    ============================================================ */
 
-/* Titel & Text */
-#popup-content h2 {
-  font-size: clamp(1.4rem, 2vw, 2.6rem);
-  color: var(--ci-darkgreen);
-  margin-bottom: 1rem;
-}
-
-#popup-content p {
-  font-size: clamp(1rem, 1.1vw, 1.4rem);
-  line-height: 1.6;
-  color: #333;
-  max-width: 65ch;
-}
-
-/* Medien allgemein */
-#popup-content video,
-#popup-content img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  border-radius: 8px;
-  background: #000;
-  object-fit: contain;
-}
-
-/* Close-Button */
-#popup-close {
-  position: absolute;
-  top: 12px;
-  right: 16px;
-  background: transparent;
-  border: none;
-  font-size: clamp(1.8rem, 2vw, 2.4rem);
-  color: var(--ci-gold);
-  cursor: pointer;
-  transition: transform 0.2s ease, color 0.2s ease;
-  z-index: 10;
-}
-
-#popup-close:hover {
-  transform: scale(1.2);
-  color: color-mix(in srgb, var(--ci-blue) 35%, var(--ci-gold));
-}
-
-/* Animationen */
 @keyframes fadeIn {
   from { opacity: 0; }
   to   { opacity: 1; }
 }
 
 @keyframes popIn {
-  0%   { transform: scale(0.9); opacity: 0; }
-  100% { transform: scale(1);   opacity: 1; }
-}
-
-/* Geräteübergreifende Anpassung */
-@media (max-height: 600px) {
-  #popup-box {
-    max-height: 85vh;
-    padding: 1rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0s !important;
-    transition: none !important;
-  }
-}
-
-/* ============================================================
-   Edel-bretonischer Audio-Player
-   ============================================================ */
-
-.addon-audio {
-  width: 100%;
-  max-width: 420px;
-  margin: 0 auto;
-  display: block;
-
-  /* Hintergrund & Rahmen */
-  background: color-mix(in srgb, var(--ci-creamwhite) 85%, #ffffff);
-  border: 2px solid var(--ci-gold);
-  border-radius: 12px;
-
-  padding: 0.6rem 0.8rem;
-
-  /* leichter Schimmer */
-  box-shadow:
-    0 0 10px color-mix(in srgb, var(--ci-gold) 35%, transparent),
-    inset 0 0 5px rgba(255, 255, 255, 0.4);
-}
-
-/* Browser-spezifische Feinanpassungen */
-.addon-audio::-webkit-media-controls-panel {
-  background: color-mix(in srgb, var(--ci-creamwhite) 92%, #ffffff) !important;
-  border-radius: 10px;
-}
-
-.addon-audio::-webkit-media-controls-play-button,
-.addon-audio::-webkit-media-controls-volume-slider,
-.addon-audio::-webkit-media-controls-timeline,
-.addon-audio::-webkit-media-controls-current-time-display,
-.addon-audio::-webkit-media-controls-time-remaining-display {
-  filter: hue-rotate(-5deg) saturate(1.15);
-}
-
-.addon-audio::-webkit-media-controls-enclosure {
-  border-radius: 10px;
-  overflow: hidden;
-}
-/* ============================================================
-   FIX für Rezepttage – 2-Spalten-Grid statt Newspaper-Layout
-   ============================================================ */
-
-.popup-day.popup-recipe .popup-body {
-  display: grid !important;
-  grid-template-columns: 1fr 1fr !important;
-  gap: clamp(1rem, 2vw, 2rem) !important;
-  column-count: unset !important;
-  text-align: left !important;
-}
-
-.popup-day.popup-recipe .recipe-image {
-  float: none !important;
-  shape-outside: none !important;
-  margin: 0 0 1.2rem 0 !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  height: auto !important;
-}
-
-/* Story links */
-.popup-day.popup-recipe .story {
-  break-inside: avoid-column !important;
-}
-
-/* Recipe rechts */
-.popup-day.popup-recipe .popup-recipe-content {
-  break-inside: avoid-column !important;
-}
-
-/* Mobil einspaltig */
-@media (max-width: 900px) {
-  .popup-day.popup-recipe .popup-body {
-    grid-template-columns: 1fr !important;
-  }
+  0% { transform: scale(.9); opacity:0; }
+  100%{ transform:scale(1); opacity:1; }
 }
\ No newline at end of file