adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -136,6 +136,40 @@
     inset 0 0 10px rgba(255,255,255,0.2);
 }
 
+.fluegel.rota.left:hover,
+.fluegel.rota.hover-proxy.left {
+  transform: rotateY(115deg) scale(1.05);
+  box-shadow:
+    0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
+    inset 0 0 10px rgba(255,255,255,0.25);
+}
+
+.fluegel.rota.right:hover,
+.fluegel.rota.hover-proxy.right {
+  transform: rotateY(-115deg) scale(1.05);
+  box-shadow:
+    0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
+    inset 0 0 10px rgba(255,255,255,0.25);
+}
+
+/* === Openfield === */
+
+.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;
+}
+
+.door.open + .openfield,
 .fluegel.rota.left + .fluegel.rota.right + .openfield,
 .fluegel.rota.right + .fluegel.rota.left + .openfield {
   opacity: 1;
@@ -161,65 +195,9 @@
   transform: translateZ(-1px);
 }
 
-
-/* Hover bei geöffneten Flügeln */
-.fluegel.rota.left:hover,
-.fluegel.rota.right:hover,
-.fluegel.rota.left.hover-proxy,
-.fluegel.rota.right.hover-proxy {
-  transform: rotateY(var(--door-rotation)) scale(1.05);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--ci-gold) 20%, var(--ci-darkgreen)),
-    color-mix(in srgb, var(--ci-creamwhite) 15%, var(--ci-blue))
-  );
-  box-shadow:
-    0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
-    inset 0 0 10px rgba(255,255,255,0.25);
-}
-
-/* === Openfield === */
-
-.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;
-}
-
-.door.open + .openfield {
-  opacity: 1;
-  pointer-events: auto;
-  z-index: 6;
-  background:
-    linear-gradient(
-      130deg,
-      rgba(255, 255, 255, 0.35) 0%,
-      rgba(255, 255, 255, 0.15) 30%,
-      rgba(255, 255, 255, 0.05) 55%,
-      rgba(0, 0, 0, 0.25) 100%
-    ),
-    rgba(0, 0, 0, 0.12);
-  backdrop-filter: blur(2px) brightness(1.08);
-  -webkit-backdrop-filter: blur(2px) brightness(1.08);
-  border: 2px solid color-mix(in srgb, var(--ci-gold) 85%, transparent);
-  box-shadow:
-    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);
-}
-
 .door.open + .openfield:hover,
+.fluegel.rota.left + .fluegel.rota.right + .openfield:hover,
+.fluegel.rota.right + .fluegel.rota.left + .openfield:hover,
 .openfield.hover-proxy {
   transform: scale(1.05);
   background:
@@ -235,7 +213,9 @@
     inset 0 0 10px rgba(255, 255, 255, 0.25);
 }
 
-.door.open:hover + .openfield {
+.door.open:hover + .openfield,
+.fluegel.rota.left:hover + .fluegel.rota.right + .openfield,
+.fluegel.rota.right:hover + .fluegel.rota.left + .openfield {
   transform: scale(1.05);
   background:
     linear-gradient(