From 426334e2bbb4a38d03706aceddb6d3d8f46f73a1 Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 15:10:24 +0000 Subject: [PATCH] adventskalender/2025/css/main.css aktualisiert --- adventskalender/2025/css/main.css | 36 +++++++++++++++++++------------ 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 0f91ec2..3445bd8 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -130,29 +130,42 @@ transform: rotateY(-8deg) scale(1.05); } -/* === Offenes Türchen – realistischer Plastikfolien-Effekt === */ +/* === Offenes Türchen – realistischer Plastikfolien-Look === */ +.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; +} + +/* sichtbar, wenn Tür offen ist */ .door.open + .openfield { opacity: 1; pointer-events: auto; z-index: 6; - /* Basis: durchsichtige Plastikfolie */ + /* halbtransparente Plastikfolie mit Glanz */ background: - /* diagonaler Glanzstreifen */ linear-gradient( 130deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.15) 30%, - rgba(255, 255, 255, 0.05) 60%, + rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0.25) 100% ), - /* dunkler, leicht transparenter Schleier für Tiefe */ - rgba(0, 0, 0, 0.15); - + rgba(0, 0, 0, 0.12); backdrop-filter: blur(2px) brightness(1.08); -webkit-backdrop-filter: blur(2px) brightness(1.08); - /* Rahmen & 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.6), @@ -161,14 +174,9 @@ 0 0 14px color-mix(in srgb, var(--ci-gold) 15%, transparent); transform: translateZ(-1px); - transition: - opacity 0.3s ease, - transform 0.25s ease, - box-shadow 0.25s ease, - background 0.4s ease; } -/* Hover – identisch zum Türchen */ +/* Hover – identisch zu den Türen, behält Clip & Glitzer */ .door.open + .openfield:hover { transform: scale(1.05); background: