diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 3775f6d..426eac4 100644 --- a/adventskalender/2025/css/main.css +++ b/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" */ - background: radial-gradient( - circle at 30% 30%, - rgba(0, 0, 0, 0.35) 0%, - rgba(0, 0, 0, 0.55) 100% - ), - color-mix(in srgb, var(--ci-darkgreen) 40%, var(--ci-blue) 60%); - border: 2px solid var(--ci-gold); + /* komplett transparent, nur Licht/Schatten */ + background: + linear-gradient( + 145deg, + rgba(255, 255, 255, 0.2) 0%, + 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 */ + 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 12px rgba(0, 0, 0, 0.7), - 0 0 10px color-mix(in srgb, var(--ci-gold) 25%, transparent); + 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); } \ No newline at end of file