optical enhancement in popup

adventskalender/2025/css/popup.css

@@ -1,12 +1,10 @@
-/* Bratonien Adventskalender 2025 – Popup Design (hell & festlich) */
+/* Bratonien Adventskalender 2025 – Popup Design (bandbreitenoptimiert, hell & festlich) */
 
+/* === Overlay === */
 #popup-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(247, 243, 232, 0.88); /* leicht gold-creamiger Schleier */
+  inset: 0;
+  background: rgba(247, 243, 232, 0.88);
   backdrop-filter: blur(6px) brightness(1.05);
   -webkit-backdrop-filter: blur(6px) brightness(1.05);
   display: none;
@@ -20,6 +18,7 @@
   animation: fadeIn 0.3s ease;
 }
 
+/* === Popup-Box === */
 #popup-box {
   background: linear-gradient(
     180deg,
@@ -29,19 +28,29 @@
   border: 2px solid var(--ci-gold);
   border-radius: 16px;
   box-shadow:
-    0 0 20px color-mix(in srgb, var(--ci-gold) 40%, transparent),
+    0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
     inset 0 0 10px rgba(255, 255, 255, 0.4);
-  max-width: 640px;
-  width: 90%;
-  max-height: 85%;
+  width: clamp(320px, 94vw, 1600px); /* Default für sehr kleine Geräte */
+  max-height: 90vh;
   overflow-y: auto;
-  padding: 2.5rem 2rem;
+  padding: clamp(1.5rem, 2vw, 3rem);
   color: #333;
   text-align: center;
   animation: popIn 0.35s ease;
   position: relative;
+  backdrop-filter: blur(3px);
+  transition: width 0.3s ease, padding 0.3s ease;
 }
 
+/* === Inhalt === */
+#popup-content {
+  margin-top: 1rem;
+  font-family: "Bratonien2025", cursive;
+  font-size: clamp(1rem, 1.2vw, 1.5rem);
+  line-height: 1.6;
+}
+
+/* === Close-Button === */
 #popup-close {
   position: absolute;
   top: 12px;
@@ -59,15 +68,7 @@
   color: color-mix(in srgb, var(--ci-blue) 35%, var(--ci-gold));
 }
 
-#popup-content {
-  margin-top: 1rem;
-  font-family: "Bratonien2025", cursive;
-  font-size: 1.3rem;
-  line-height: 1.6;
-}
-
 /* === Animationen === */
-
 @keyframes fadeIn {
   from { opacity: 0; }
   to   { opacity: 1; }
@@ -78,15 +79,57 @@
   100% { transform: scale(1);   opacity: 1; }
 }
 
-/* === Mobile Anpassung === */
+/* === Geräteoptimierungen === */
 
+/* Smartphones bis 600 px */
 @media (max-width: 600px) {
   #popup-box {
-    width: 92%;
-    padding: 1.8rem 1.4rem;
+    width: 94vw;
+    padding: 1.4rem;
     font-size: 1rem;
   }
   #popup-close {
     font-size: 1.6rem;
   }
+}
+
+/* Kleine Tablets (600–899 px) */
+@media (min-width: 601px) and (max-width: 899px) {
+  #popup-box {
+    width: 90vw;
+    padding: 1.6rem;
+  }
+}
+
+/* Tablets & kleine Laptops (900–1279 px) */
+@media (min-width: 900px) and (max-width: 1279px) {
+  #popup-box {
+    width: 85vw;
+    padding: 2rem;
+  }
+}
+
+/* Standard-Laptops & Desktops (1280–1599 px) */
+@media (min-width: 1280px) and (max-width: 1599px) {
+  #popup-box {
+    width: 80vw;
+    padding: 2.2rem 3rem;
+  }
+}
+
+/* Große Monitore (1600–1919 px) */
+@media (min-width: 1600px) and (max-width: 1919px) {
+  #popup-box {
+    width: 75vw;
+    padding: 2.5rem 3.5rem;
+  }
+}
+
+/* 4K und Ultrawide (≥1920 px) */
+@media (min-width: 1920px) {
+  #popup-box {
+    width: 70vw;
+    max-width: 1800px;
+    padding: 3rem 4rem;
+  }
 }