adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -130,29 +130,42 @@
   transform: rotateY(-8deg) scale(1.05);
 }
 
-/* === Offenes Türchen – realistischer Plastikfolien-Effekt === */
+/* === Offenes Türchen – realistischer Plastikfolien-Look === */
+.openfield {
+  position: absolute;
+  display: block;
+  border-radius: 12px;
+  opacity: 0;
+  pointer-events: none;
+  cursor: pointer;
+  z-index: 1;
+  transition:
+    opacity 0.3s ease,
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    background 0.4s ease;
+}
+
+/* sichtbar, wenn Tür offen ist */
 .door.open + .openfield {
   opacity: 1;
   pointer-events: auto;
   z-index: 6;
 
-  /* Basis: durchsichtige Plastikfolie */
+  /* halbtransparente Plastikfolie mit Glanz */
   background:
-    /* diagonaler Glanzstreifen */
     linear-gradient(
       130deg,
       rgba(255, 255, 255, 0.35) 0%,
       rgba(255, 255, 255, 0.15) 30%,
-      rgba(255, 255, 255, 0.05) 60%,
+      rgba(255, 255, 255, 0.05) 55%,
       rgba(0, 0, 0, 0.25) 100%
     ),
-    /* dunkler, leicht transparenter Schleier für Tiefe */
+    rgba(0, 0, 0, 0.12);
-    rgba(0, 0, 0, 0.15);
-
   backdrop-filter: blur(2px) brightness(1.08);
   -webkit-backdrop-filter: blur(2px) brightness(1.08);
 
-  /* Rahmen & Schatten */
+  /* Rahmen & Tiefe */
   border: 2px solid color-mix(in srgb, var(--ci-gold) 85%, transparent);
   box-shadow:
     inset 0 4px 8px rgba(0, 0, 0, 0.6),
@@ -161,14 +174,9 @@
     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 zum Türchen */
+/* Hover – identisch zu den Türen, behält Clip & Glitzer */
 .door.open + .openfield:hover {
   transform: scale(1.05);
   background: