adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -130,7 +130,7 @@
   transform: rotateY(-8deg) scale(1.05);
 }
 
-/* === Feld hinter geöffneter Tür (sichtbar, wenn Tür offen ist) === */
+/* === Offenes Türchen – "Loch mit Plastikfolie" === */
 .openfield {
   position: absolute;
   display: block;
@@ -139,10 +139,6 @@
   pointer-events: none;
   transition: opacity 0.3s ease;
   z-index: 1;
-
-  /* Standard – unsichtbar */
-  background: none;
-  border: none;
 }
 
 /* Sobald die Tür offen ist */
@@ -151,16 +147,26 @@
   pointer-events: auto;
   z-index: 6;
 
-  /* Optik: "Türchen wurde herausgenommen" */
+  /* komplett transparent, nur Licht/Schatten */
-  background: radial-gradient(
+  background:
-      circle at 30% 30%,
+    linear-gradient(
-      rgba(0, 0, 0, 0.35) 0%,
+      145deg,
-      rgba(0, 0, 0, 0.55) 100%
+      rgba(255, 255, 255, 0.2) 0%,
-    ),
+      rgba(255, 255, 255, 0.05) 35%,
-    color-mix(in srgb, var(--ci-darkgreen) 40%, var(--ci-blue) 60%);
+      rgba(0, 0, 0, 0.25) 100%
-  border: 2px solid var(--ci-gold);
+    );
+
+  /* feine “Plastikfolie” */
+  backdrop-filter: blur(1.2px) brightness(1.05);
+  -webkit-backdrop-filter: blur(1.2px) brightness(1.05);
+
+  /* goldener Rand + tiefer innerer Schatten */
+  border: 2px solid color-mix(in srgb, var(--ci-gold) 85%, transparent);
   box-shadow:
-    inset 0 0 8px rgba(0, 0, 0, 0.6),
+    inset 0 4px 8px rgba(0, 0, 0, 0.65),
-    inset 0 4px 12px rgba(0, 0, 0, 0.7),
+    inset 0 -3px 6px rgba(0, 0, 0, 0.55),
-    0 0 10px color-mix(in srgb, var(--ci-gold) 25%, transparent);
+    0 0 10px rgba(0, 0, 0, 0.4);
+
+  /* simuliert leichte Einbuchtung */
+  transform: translateZ(-1px);
 }