diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 426eac4..30931cd 100644 --- a/adventskalender/2025/css/main.css +++ b/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); } \ No newline at end of file