From 95eecae98b930f31299ffa741c6582465e105724 Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 20:32:50 +0000 Subject: [PATCH] adventskalender/2025/css/main.css aktualisiert --- adventskalender/2025/css/main.css | 86 ++++++++----------------------- 1 file changed, 22 insertions(+), 64 deletions(-) diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 4879cf4..827e8e9 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -89,60 +89,12 @@ /* === Flügeltüren === */ -.fluegel { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - aspect-ratio: 1 / 1; +.fluegel.left { transform-origin: left center; border-radius: 12px 0 0 12px; } +.fluegel.right { transform-origin: right center; border-radius: 0 12px 12px 0; } - background: linear-gradient( - 180deg, - 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 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; -} - -/* Positionierung + Rundungen */ -.fluegel.left { - transform-origin: left center; - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; -} - -.fluegel.right { +.fluegel.left:hover, +.fluegel.hover-proxy.left { transform-origin: right center; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; -} - -/* Hover (optisch identisch wie .door) */ -.fluegel:hover, -.fluegel.hover-proxy { transform: scale(1.05); background: linear-gradient( 180deg, @@ -154,30 +106,36 @@ inset 0 0 10px rgba(255,255,255,0.25); } -/* Öffnung – eigene Klasse „rota“ */ +.fluegel.right:hover, +.fluegel.hover-proxy.right { + transform-origin: left 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)) + ); + box-shadow: + 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), + inset 0 0 10px rgba(255,255,255,0.25); +} + .fluegel.rota.left { - transform: rotateY(-115deg); + transform: rotateY(115deg); + transform-origin: left center; box-shadow: 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), inset 0 0 10px rgba(255,255,255,0.2); } .fluegel.rota.right { - transform: rotateY(115deg); + transform: rotateY(-115deg); + transform-origin: right center; box-shadow: 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), inset 0 0 10px rgba(255,255,255,0.2); } -/* Für konsistentes Verhalten (auch beim Hover in geöffnetem Zustand) */ -.fluegel.rota.left:hover { - transform: rotateY(-115deg) scale(1.05); -} - -.fluegel.rota.right:hover { - transform: rotateY(115deg) scale(1.05); -} - /* === Openfield === */ .openfield {