adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -137,7 +137,11 @@
   border-radius: 12px;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    box-shadow 0.25s ease,
+    background 0.25s ease,
+    transform 0.25s ease;
   z-index: 1;
 }
 
@@ -147,7 +151,7 @@
   pointer-events: auto;
   z-index: 6;
 
-  /* komplett transparent, nur Licht/Schatten */
+  /* Plastikfolie – durchsichtig mit Glanz */
   background:
     linear-gradient(
       145deg,
@@ -155,18 +159,30 @@
       rgba(255, 255, 255, 0.05) 35%,
       rgba(0, 0, 0, 0.25) 100%
     );
-
-  /* feine “Plastikfolie” */
   backdrop-filter: blur(1.2px) brightness(1.05);
   -webkit-backdrop-filter: blur(1.2px) brightness(1.05);
 
-  /* goldener Rand + tiefer innerer 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.65),
     inset 0 -3px 6px rgba(0, 0, 0, 0.55),
     0 0 10px rgba(0, 0, 0, 0.4);
 
-  /* simuliert leichte Einbuchtung */
   transform: translateZ(-1px);
 }
+
+/* Hover – identisch zu den Türen */
+.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%,
+      rgba(0, 0, 0, 0.25) 100%
+    );
+  box-shadow:
+    0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
+    inset 0 0 10px rgba(255, 255, 255, 0.25);
+}