diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 827e8e9..0d64c2a 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -89,26 +89,60 @@ /* === Flügeltüren === */ -.fluegel.left { transform-origin: left center; border-radius: 12px 0 0 12px; } -.fluegel.right { transform-origin: right center; border-radius: 0 12px 12px 0; } +.fluegel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 1 / 1; -.fluegel.left:hover, -.fluegel.hover-proxy.left { - transform-origin: right center; - transform: scale(1.05); background: linear-gradient( 180deg, - color-mix(in srgb, var(--ci-gold) 20%, var(--ci-darkgreen)), - color-mix(in srgb, var(--ci-creamwhite) 15%, var(--ci-blue)) + color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), + color-mix(in srgb, var(--ci-blue) 35%, transparent) ); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + + border: 2px solid var(--ci-gold); box-shadow: - 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), - inset 0 0 10px rgba(255,255,255,0.25); + 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), + inset 0 0 6px rgba(255,255,255,0.18); + + font-family: "Bratonien2025", cursive; + font-size: 2.3vw; + color: var(--ci-gold); + text-shadow: + 0 0 3px rgba(0,0,0,0.6), + 0 0 8px rgba(0,0,0,0.4); + + cursor: pointer; + transition: + transform 0.6s ease, + box-shadow 0.3s ease, + background 0.25s ease; + + transform-style: preserve-3d; + perspective: 800px; + z-index: 5; } -.fluegel.right:hover, -.fluegel.hover-proxy.right { +/* Position + Radius */ +.fluegel.left { transform-origin: left center; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; +} + +.fluegel.right { + transform-origin: right center; + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; +} + +/* Hover */ +.fluegel:hover, +.fluegel.hover-proxy { transform: scale(1.05); background: linear-gradient( 180deg, @@ -120,6 +154,7 @@ inset 0 0 10px rgba(255,255,255,0.25); } +/* Rotation beim Öffnen */ .fluegel.rota.left { transform: rotateY(115deg); transform-origin: left center; @@ -136,6 +171,16 @@ inset 0 0 10px rgba(255,255,255,0.2); } +/* Optional: Hover auf geöffnete Flügel */ +.fluegel.rota.left:hover, +.fluegel.rota.right:hover { + transform: rotateY(var(--fluegel-rotation)) scale(1.05); +} + +/* Für konsistente Übergänge (optional, falls in Nutzung) */ +.fluegel.rota.left { --fluegel-rotation: 115deg; } +.fluegel.rota.right { --fluegel-rotation: -115deg; } + /* === Openfield === */ .openfield {