adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -130,58 +130,55 @@
   transform: rotateY(-8deg) scale(1.05);
 }
 
-/* === Offenes Türchen – "Loch mit Plastikfolie" === */
-.openfield {
-  position: absolute;
-  display: block;
-  border-radius: 12px;
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    opacity 0.3s ease,
-    box-shadow 0.25s ease,
-    background 0.25s ease,
-    transform 0.25s ease;
-  z-index: 1;
-}
-
-/* Sobald die Tür offen ist */
+/* === Offenes Türchen – realistischer Plastikfolien-Effekt === */
 .door.open + .openfield {
   opacity: 1;
   pointer-events: auto;
   z-index: 6;
 
-  /* Plastikfolie – durchsichtig mit Glanz */
+  /* Basis: durchsichtige Plastikfolie */
   background:
+    /* diagonaler Glanzstreifen */
     linear-gradient(
-      145deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.05) 35%,
+      130deg,
+      rgba(255, 255, 255, 0.35) 0%,
+      rgba(255, 255, 255, 0.15) 30%,
+      rgba(255, 255, 255, 0.05) 60%,
       rgba(0, 0, 0, 0.25) 100%
-    );
-  backdrop-filter: blur(1.2px) brightness(1.05);
-  -webkit-backdrop-filter: blur(1.2px) brightness(1.05);
+    ),
+    /* dunkler, leicht transparenter Schleier für Tiefe */
+    rgba(0, 0, 0, 0.15);
 
-  /* Rahmen & Tiefe */
+  backdrop-filter: blur(2px) brightness(1.08);
+  -webkit-backdrop-filter: blur(2px) brightness(1.08);
+
+  /* Rahmen & Schatten */
   border: 2px solid color-mix(in srgb, var(--ci-gold) 85%, transparent);
   box-shadow:
-    inset 0 4px 8px rgba(0, 0, 0, 0.65),
-    inset 0 -3px 6px rgba(0, 0, 0, 0.55),
-    0 0 10px rgba(0, 0, 0, 0.4);
+    inset 0 4px 8px rgba(0, 0, 0, 0.6),
+    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
+    0 0 10px rgba(0, 0, 0, 0.35),
+    0 0 14px color-mix(in srgb, var(--ci-gold) 15%, transparent);
 
   transform: translateZ(-1px);
+  transition:
+    opacity 0.3s ease,
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    background 0.4s ease;
 }
 
-/* Hover – identisch zu den Türen */
+/* Hover – identisch zum Türchen */
 .door.open + .openfield:hover {
   transform: scale(1.05);
   background:
     linear-gradient(
-      145deg,
-      rgba(255, 255, 255, 0.25) 0%,
-      rgba(255, 255, 255, 0.1) 35%,
+      130deg,
+      rgba(255, 255, 255, 0.45) 0%,
+      rgba(255, 255, 255, 0.15) 40%,
       rgba(0, 0, 0, 0.25) 100%
-    );
+    ),
+    rgba(0, 0, 0, 0.12);
   box-shadow:
     0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
     inset 0 0 10px rgba(255, 255, 255, 0.25);