diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index d3bfbda..ba6ace8 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -144,6 +144,47 @@ inset 0 0 10px rgba(255,255,255,0.25); } +/* Ergänzung: echtes Öffnen der doppeltüren 6 & 24 mit Pseudo-Flügeln */ +.door.double::before, +.door.double::after { + content: ""; + position: absolute; + top: 0; + height: 100%; + width: 50%; + border-radius: 12px; + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), + color-mix(in srgb, var(--ci-blue) 35%, transparent) + ); + box-shadow: + inset 0 0 6px rgba(255,255,255,0.18), + 0 0 8px rgba(0,0,0,0.3); + transition: transform 0.8s ease; + transform-style: preserve-3d; + backface-visibility: hidden; +} + +.door.double::before { left: 0; transform-origin: left center; } +.door.double::after { right: 0; transform-origin: right center; } + +/* beide Flügel öffnen sich symmetrisch */ +.door.double.open::before { transform: rotateY(-115deg); } +.door.double.open::after { transform: rotateY(115deg); } + +/* Hover bei geöffneter Doppeltür – bleibt offen, bekommt Glow */ +.door.double.open:hover::before, +.door.double.open:hover::after { + transform: scale(1.05) rotateY(var(--fluegel,0)); + box-shadow: + 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), + inset 0 0 10px rgba(255,255,255,0.25); +} +.door.double.open::before { --fluegel:-115deg; } +.door.double.open::after { --fluegel:115deg; } + /* === Offenes Türchen – realistische Folie === */ .openfield { position: absolute;