no message

adventskalender/shared/css/popup.css

@@ -1,8 +1,11 @@
 /* ============================================================
-   Bratonien Adventskalender – SAUBERE POPUP.CSS
+   Bratonien Adventskalender – NEUE SAUBERE POPUP.CSS
+   ============================================================ */
+
+/* ============================================================
+   OVERLAY
    ============================================================ */
 
-/* === Overlay === */
 #popup-overlay {
   position: fixed;
   inset: 0;
@@ -19,213 +22,41 @@
   animation: fadeIn 0.3s ease;
 }
 
-/* === Popup-Box === */
+/* ============================================================
+   POPUP-BOX
+   ============================================================ */
+
 #popup-box {
+  position: relative;
+  width: min(95vw, 1800px);
+  max-height: 90vh;
+
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--ci-creamwhite) 80%, white),
     color-mix(in srgb, var(--ci-gold) 15%, #fff9e6)
   );
-  position: relative;
+
   border: 2px solid var(--ci-gold);
   border-radius: 16px;
-  width: min(95vw, 1800px);
-  max-height: 90vh;
-
-  overflow-y: auto;
-  overflow-x: hidden;
 
   padding: clamp(1rem, 1.5vw, 2rem);
-  box-shadow: 
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+
+  box-shadow:
     0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
     inset 0 0 10px rgba(255,255,255,0.4);
 
   animation: popIn .35s ease;
-  color:#333;
+  color: #333;
-  box-sizing:border-box;
-}
-
-/* === Hauptcontainer === */
-#popup-content {
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: clamp(1rem,2vw,2.5rem);
 }
 
 /* ============================================================
-   TITELZEILE
+   CLOSE BUTTON
-   ============================================================ */
-.popup-header {
-  text-align: center;
-  border-bottom: 2px solid var(--ci-gold);
-  padding-bottom: .5rem;
-}
-
-.popup-header h2 {
-  margin: 0;
-  font-size: clamp(1.6rem, 2.2vw, 2.8rem);
-  color: var(--ci-darkgreen);
-}
-
-/* ============================================================
-   ZWEI SPALTEN – Standardlayout für ALLE Tage
    ============================================================ */
 
-.popup-body {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: clamp(1rem, 2vw, 2.5rem);
-}
-
-.story {
-  line-height: 1.6;
-  max-width: 70ch;
-}
-
-/* Addon rechts */
-.addon {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(1rem, 1.5vw, 2rem);
-  align-items: flex-start;
-}
-
-.addon img,
-.addon video {
-  width: 100%;
-  max-width: 700px;
-  height: auto;
-  border-radius: 10px;
-  background:#000;
-  object-fit: contain;
-  box-shadow: 0 0 12px rgba(0,0,0,0.25);
-}
-
-/* ============================================================
-   MOBILE
-   ============================================================ */
-@media (max-width: 900px) {
-  .popup-body {
-    grid-template-columns: 1fr;
-  }
-  .addon {
-    align-items: center;
-  }
-}
-
-/* ============================================================
-   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 {
-  /* gleiche Grid-Basis, aber mit speziellem Innenlayout */
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: clamp(1rem, 2vw, 2.5rem);
-}
-
-/* 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;
-}
-
-.popup-recipe-content picture.recipe-image-wrapper {
-  float: left;
-  width: clamp(200px, 40%, 330px);
-  margin: 0 1.5rem 1.2rem 0;
-  border-radius: 10px;
-  shape-outside: inset(0 round 10px);
-  box-shadow: 0 0 10px rgba(0,0,0,0.2);
-  display: block;
-}
-
-/* Bild floatet INNERHALB der rechten Spalte */
-.popup-recipe-content .recipe-image {
-  float: none;
-  width: clamp(200px, 40%, 330px);
-  margin: 0 1.5rem 1.2rem 0;
-  border-radius: 10px;
-  shape-outside: inset(0 round 10px);
-  box-shadow: 0 0 10px rgba(0,0,0,0.2);
-}
-
-/* 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);
-}
-
-.popup-recipe-content ul,
-.popup-recipe-content ol {
-  margin-left: 1.2rem;
-}
-
-
-
-/* --- Mobile: kein float --- */
-@media (max-width:900px) {
-  .popup-recipe .popup-body {
-    grid-template-columns: 1fr;
-  }
-  .popup-recipe-content .recipe-image {
-    float: none;
-    margin: 0 auto 1rem auto;
-    display: block;
-    width: 100%;
-    max-width: 350px;
-  }
-}
-
-/* ============================================================
-   Animationen
-   ============================================================ */
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes popIn {
-  0% { transform: scale(.9); opacity:0; }
-  100%{ transform:scale(1); opacity:1; }
-}
-
-/* =============================
-   CLOSE-BUTTON (oben rechts)
-   ============================= */
 #popup-close {
   position: absolute;
   top: 12px;
@@ -235,9 +66,9 @@
   height: 32px;
 
   border: none;
-  background: color-mix(in srgb, var(--ci-gold) 15%, #fff9e6);
   border: 2px solid var(--ci-gold);
   border-radius: 50%;
+  background: color-mix(in srgb, var(--ci-gold) 15%, #fff9e6);
 
   font-size: 20px;
   font-weight: bold;
@@ -252,3 +83,157 @@
   background: color-mix(in srgb, var(--ci-gold) 25%, #fff2cc);
 }
 
+/* ============================================================
+   GLOBAL CONTAINER
+   ============================================================ */
+
+#popup-content {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1rem, 2vw, 2.5rem);
+}
+
+/* ============================================================
+   HEADER
+   ============================================================ */
+
+.popup-header {
+  text-align: center;
+  border-bottom: 2px solid var(--ci-gold);
+  padding-bottom: .5rem;
+}
+
+.popup-header h2 {
+  margin: 0;
+  font-size: clamp(1.6rem, 2.2vw, 2.8rem);
+  color: var(--ci-darkgreen);
+}
+
+/* ============================================================
+   STANDARD ZWEI-SPALTEN LAYOUT
+   ============================================================ */
+
+.popup-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1rem, 2vw, 2.5rem);
+}
+
+/* Linke Spalte (Story bleibt unverändert) */
+.story {
+  line-height: 1.6;
+  max-width: 70ch;
+}
+
+/* Rechte Spalte: Standard-Content */
+.addon {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1rem, 1.5vw, 2rem);
+  align-items: flex-start;
+}
+
+.addon img,
+.addon video {
+  width: 100%;
+  max-width: 700px;
+  height: auto;
+  border-radius: 10px;
+  object-fit: contain;
+  background:#000;
+  box-shadow: 0 0 12px rgba(0,0,0,0.25);
+}
+
+/* ============================================================
+   REZEPTTAG – TEXT SOLL BILD 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 */
+.popup-recipe .popup-recipe-content {
+  display: block;
+  width: 100%;
+}
+
+/* Rezepttitel */
+.recipe-title {
+  font-size: clamp(1.3rem,1.6vw,2rem);
+  color: var(--ci-darkgreen);
+  font-weight: 600;
+  margin-bottom: .6rem;
+}
+
+/* Bild floaten lassen */
+.popup-recipe-content picture.recipe-image-wrapper {
+  float: left;
+  width: clamp(200px, 40%, 330px);
+  margin: 0 1.5rem 1.2rem 0;
+  border-radius: 10px;
+  display: block;
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  shape-outside: inset(0 round 10px);
+}
+
+/* inneres Bild: KEIN FLOAT */
+.popup-recipe-content .recipe-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+
+/* Überschriften Zutaten/Zubereitung */
+.popup-recipe-content h4 {
+  font-size: clamp(1rem, 1.2vw, 1.4rem);
+  color: var(--ci-darkgreen);
+  margin: 0.8rem 0 .4rem 0;
+}
+
+.popup-recipe-content ul,
+.popup-recipe-content ol {
+  margin-left: 1.2rem;
+}
+
+/* ============================================================
+   MOBILE
+   ============================================================ */
+
+@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;
+    width: 100%;
+    max-width: 360px;
+    shape-outside: none;
+  }
+}
+
+/* ============================================================
+   ANIMATIONEN
+   ============================================================ */
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes popIn {
+  0%   { transform: scale(.9); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}