Layoutänderung

adventskalender/2025/css/popup.css

@@ -1,4 +1,8 @@
-/* Bratonien Adventskalender 2025 – Popup Design (bandbreitenoptimiert, hell & festlich) */
+/* ============================================================
+   Bratonien Adventskalender 2025 – Popup Design
+   Bandbreitenoptimiert, hell & festlich
+   Enthält Layouts: Standard, 3-Part (Story), Recipe
+   ============================================================ */
 
 /* === Overlay === */
 #popup-overlay {
@@ -31,7 +35,6 @@
     0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
     inset 0 0 10px rgba(255, 255, 255, 0.4);
 
-  /* Dynamisch skalierendes Layout */
   width: min(90vw, 1800px);
   max-height: 90vh;
   overflow-y: auto;
@@ -46,31 +49,146 @@
   box-sizing: border-box;
 }
 
-/* === Inhalt === */
+/* === Grundlayout für Inhalte === */
 #popup-content {
   margin-top: 1rem;
   font-family: "Bratonien2025", cursive;
   font-size: clamp(1rem, 1.2vw, 1.5rem);
   line-height: 1.6;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-items: center;
-  gap: clamp(1rem, 2vw, 3rem);
+  gap: clamp(1rem, 2vw, 2.5rem);
 }
 
-/* === Medien (Video, Bild etc.) === */
-#popup-content video,
-#popup-content img {
+/* ============================================================
+   DREITEILIGES POPUP-LAYOUT (Titel / Story / Inhalt)
+   ============================================================ */
+
+.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;
+}
+
+.popup-header h2 {
+  font-size: clamp(1.5rem, 2vw, 2.5rem);
+  color: var(--ci-darkgreen);
+  margin: 0;
+}
+
+/* --- Hauptbereich mit zwei Spalten --- */
+.popup-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1rem, 2vw, 2rem);
+  align-items: start;
+}
+
+.popup-body .story {
+  max-width: 70ch;
+  line-height: 1.6;
+  color: #333;
+}
+
+.popup-body .addon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.popup-body .addon video,
+.popup-body .addon img,
+.popup-body .addon audio {
   max-width: 100%;
   height: auto;
-  display: block;
   border-radius: 8px;
   background: #000;
-  object-fit: contain;
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
 }
 
-/* === Titel & Text === */
+/* --- Mobile Ansicht: einspaltig --- */
+@media (max-width: 900px) {
+  .popup-body {
+    grid-template-columns: 1fr;
+  }
+  .popup-day.popup-3part {
+    text-align: center;
+  }
+  .popup-body .addon {
+    margin-top: 1rem;
+  }
+}
+
+/* ============================================================
+   REZEPT-LAYOUT (Text umfließt Bild)
+   ============================================================ */
+
+.popup-recipe .popup-body {
+  display: block;
+  column-count: 2;
+  column-gap: clamp(1.5rem, 3vw, 3rem);
+  text-align: justify;
+}
+
+.popup-recipe .popup-body img.recipe-image {
+  float: left;
+  width: clamp(240px, 30%, 380px);
+  margin: 0 1.5rem 1rem 0;
+  border-radius: 10px;
+  box-shadow: 0 0 8px rgba(0,0,0,0.15);
+  shape-outside: inset(0 round 10px);
+}
+
+.popup-recipe .popup-body h3 {
+  column-span: all;
+  font-size: clamp(1.2rem, 1.6vw, 1.8rem);
+  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 .popup-body li {
+  break-inside: avoid;
+}
+
+/* --- Mobile Ansicht: Rezept einspaltig --- */
+@media (max-width: 900px) {
+  .popup-recipe .popup-body {
+    column-count: 1;
+  }
+  .popup-recipe .popup-body img.recipe-image {
+    float: none;
+    display: block;
+    margin: 0 auto 1rem auto;
+    width: 100%;
+    max-width: 500px;
+  }
+}
+
+/* ============================================================
+   Allgemeine Gestaltung & Animationen
+   ============================================================ */
+
+/* Titel & Text */
 #popup-content h2 {
   font-size: clamp(1.4rem, 2vw, 2.6rem);
   color: var(--ci-darkgreen);
@@ -84,7 +202,18 @@
   max-width: 65ch;
 }
 
-/* === Close-Button === */
+/* 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;
@@ -103,7 +232,7 @@
   color: color-mix(in srgb, var(--ci-blue) 35%, var(--ci-gold));
 }
 
-/* === Animationen === */
+/* Animationen */
 @keyframes fadeIn {
   from { opacity: 0; }
   to   { opacity: 1; }
@@ -114,7 +243,7 @@
   100% { transform: scale(1);   opacity: 1; }
 }
 
-/* === Geräteübergreifende Anpassung === */
+/* Geräteübergreifende Anpassung */
 @media (max-height: 600px) {
   #popup-box {
     max-height: 85vh;