no message

adventskalender/shared/css/popup.css

@@ -1,7 +1,3 @@
-/* ============================================================
-   Bratonien Adventskalender – POPUP.CSS
-   ============================================================ */
-
 /* ============================================================
    OVERLAY
    ============================================================ */
@@ -19,11 +15,11 @@
 
 #popup-overlay.active {
   display: flex;
-  animation: fadeIn 0.3s ease;
+  animation: fadeIn .3s ease;
 }
 
 /* ============================================================
-   POPUP-BOX – GLOBALER STANDARD (Pinyon)
+   POPUP-BOX
    ============================================================ */
 
 #popup-box {
@@ -37,7 +33,7 @@
     color-mix(in srgb, var(--ci-gold) 15%, #fff9e6)
   );
 
-  font-size: 0.96em;                        /* optisch passend kompensiert */
+  font-size: .96em;
   line-height: 1.35;
 
   border: 2px solid var(--ci-gold);
@@ -46,8 +42,6 @@
   padding: clamp(1rem, 1.5vw, 2rem);
   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);
@@ -57,54 +51,12 @@
 }
 
 /* ============================================================
-   BODY – SPÄTER UMSCHALTBAR AUF LESBARE SCHRIFT
+   CONTENT (zentriert, keine max-breite!)
-   ============================================================ */
-
-.popup-body.font-readable {
-  font-family: "Bratonien2025 Readable", serif;
-  font-size: 1em;
-  line-height: 1.55;
-}
-
-/* ============================================================
-   CLOSE BUTTON
-   ============================================================ */
-
-#popup-close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-
-  width: 32px;
-  height: 32px;
-
-  border: none;
-  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;
-  line-height: 28px;
-  color: var(--ci-gold);
-  cursor: pointer;
-
-  box-shadow: 0 0 8px rgba(0,0,0,0.2);
-}
-
-#popup-close:hover {
-  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);
@@ -115,6 +67,7 @@
    ============================================================ */
 
 .popup-header {
+  position: relative;
   text-align: center;
   border-bottom: 2px solid var(--ci-gold);
   padding-bottom: .5rem;
@@ -124,11 +77,72 @@
   margin: 0;
   font-size: clamp(1.8rem, 2.4vw, 3.2rem);
   color: var(--ci-darkgreen);
-  font-family: "Bratonien2025", serif; /* fix: Header bleibt in Pinyon */
+  font-family: "Bratonien2025", serif;
+}
+
+/* Buttons */
+.popup-tools {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: .4rem;
+}
+
+.popup-tools button {
+  background: color-mix(in srgb, var(--ci-gold) 20%, #fff9e6);
+  border: 2px solid var(--ci-gold);
+  border-radius: 6px;
+  padding: .15rem .45rem;
+
+  font-family: "Bratonien2025 Readable", serif;
+  font-size: 1.3rem;
+  font-weight: 600;
+  letter-spacing: .3px;
+  color: var(--ci-darkgreen);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .2rem;
+  cursor: pointer;
+
+  box-shadow: 0 0 6px rgba(0,0,0,.15);
+}
+
+.popup-tools button:hover {
+  background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
+}
+
+/* Close Button */
+
+#popup-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+
+  width: 32px;
+  height: 32px;
+  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;
+  line-height: 28px;
+  color: var(--ci-gold);
+  cursor: pointer;
+
+  box-shadow: 0 0 8px rgba(0,0,0,.2);
+}
+
+#popup-close:hover {
+  background: color-mix(in srgb, var(--ci-gold) 25%, #fff2cc);
 }
 
 /* ============================================================
-   STANDARD ZWEI-SPALTEN LAYOUT
+   ZWEI-SPALTEN STANDARDLAYOUT
    ============================================================ */
 
 .popup-body {
@@ -136,169 +150,55 @@
   grid-template-columns: 1fr 1fr;
   gap: clamp(1rem, 2vw, 2.5rem);
   font-family: "Bratonien2025", serif;
-
+  font-size: 1.2rem;
 }
 
-/* Linke Spalte */
+.popup-body.font-readable {
+  font-family: "Bratonien2025 Readable", serif;
+  line-height: 1.55;
+}
+
+/* linke spalte */
 .story {
   line-height: 1.6;
-  max-width: 70ch;
 }
 
-/* Rechte Spalte: Standard-Content */
+/* rechte spalte */
 .addon {
-  padding-top: 1rem;
   display: flex;
   flex-direction: column;
   gap: clamp(1rem, 1.5vw, 2rem);
-  align-items: flex-start;
+  padding-top: 1rem;
-}
-
-.addon img {
-  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 – BILD SOLL TEXT UMWERBEN
+   REZEPT (floatendes Bild)
    ============================================================ */
 
-.popup-recipe .popup-body {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: clamp(1rem, 2vw, 2.5rem);
-}
-
-/* rechte Spalte → 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(260px, 70%, 3840px);
   margin: 0 1.5rem 1.2rem 0;
   border-radius: 10px;
   display: block;
-  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  box-shadow: 0 0 10px rgba(0,0,0,.2);
   shape-outside: inset(0 round 10px);
 }
 
-/* inneres Bild */
+.recipe-image {
-.popup-recipe-content .recipe-image {
-  display: block;
   width: 100%;
   height: auto;
   border-radius: 10px;
 }
 
-/* Zutaten/Zubereitung */
+.recipe-title {
-.popup-recipe-content h4 {
+  font-size: clamp(1.5rem, 1.6vw, 2rem);
-  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;
-  }
-
-  .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; }
-}
-
-/* ===========================================
-   TOOLS/Buttons im Header
-   =========================================== */
-
-.popup-header,
-.popup-header * {
-  position: relative;
-  font-family: "Bratonien2025 Readable", serif;
-}
-
-.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: 1.3rem;
   font-weight: 600;
-  letter-spacing: 0.3px;
-  color: var(--ci-darkgreen);
-  cursor: pointer;
-
-  box-shadow: 0 0 6px rgba(0,0,0,0.15);
-  
-display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.2rem;
-}
-
-.popup-tools button:hover {
-  background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
 }
 
 /* ============================================================
-   ADDON – PICTURE-VORLAGE
+   ADDON: Picture (90% zentriert)
    ============================================================ */
 
 .addon-picture {
@@ -307,31 +207,64 @@ display: flex;
 }
 
 .addon-picture-image {
-  width: 90%;
+  width: 95%;
   height: auto;
   display: block;
+  align-self: center;
 }
 
+/* ============================================================
+   ADDON: Audio
+   ============================================================ */
 
 .addon-audio {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
+  gap: .6rem;
 }
 
 .addon-audio audio {
   width: 100%;
-  max-width: 700px;        /* gleiche Breite wie andere Addons */
 }
 
+/* ============================================================
+   ADDON: Video (90% zentriert)
+   ============================================================ */
+
 .addon-video-wrapper {
   display: flex;
   justify-content: center;
 }
 
 .addon-video {
-  width: 90%;
+  width: 95%;
   height: auto;
   display: block;
+  align-self: center
 }
+
+/* ============================================================
+   MOBILE
+   ============================================================ */
+
+@media (max-width: 900px) {
+  .popup-body {
+    grid-template-columns: 1fr;
+  }
+
+  .popup-recipe-content picture.recipe-image-wrapper {
+    float: none;
+    width: 100%;
+    max-width: 360px;
+    margin: 0 auto 1rem;
+    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;} }