diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 17e41de..610841d 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -64,28 +64,52 @@ pointer-events: none; } -/* Rückseite – nach dem Öffnen sichtbar */ -.door::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - background: rgba(255, 255, 255, 0.08); /* leicht transparent wie Loch */ - box-shadow: inset 0 0 6px rgba(255,255,255,0.15); - transform: rotateY(180deg); - backface-visibility: hidden; +/* === Türöffnung nach Scharnier-Seite === */ + +/* Scharnierpunkte */ +.door.hinge-left { transform-origin: left center; } +.door.hinge-right { transform-origin: right center; } +.door.double { transform-origin: center; } + +/* === Geschlossener Zustand === */ +.door { + transition: + transform 0.6s ease, + box-shadow 0.3s ease, + background 0.25s ease; } -/* Geöffneter Zustand */ -.door.open { - transform: rotateY(180deg); +/* === Geöffneter Zustand: hinge-left → klappt nach links === */ +.door.open.hinge-left { + transform: rotateY(-115deg); box-shadow: 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), inset 0 0 10px rgba(255,255,255,0.2); } +.door.open.hinge-left:hover { + transform: rotateY(-115deg) scale(1.05); +} -.door.open:hover { - transform: rotateY(180deg) scale(1.05); +/* === Geöffneter Zustand: hinge-right → klappt nach rechts === */ +.door.open.hinge-right { + transform: rotateY(115deg); + box-shadow: + 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), + inset 0 0 10px rgba(255,255,255,0.2); +} +.door.open.hinge-right:hover { + transform: rotateY(115deg) scale(1.05); +} + +/* === Geöffneter Zustand: doppelte Tür (6 & 24) === */ +.door.double.open { + transform: rotateY(-8deg); + box-shadow: + 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), + inset 0 0 10px rgba(255,255,255,0.2); +} +.door.double.open:hover { + transform: rotateY(-8deg) scale(1.05); } /* === Basis für doppelflügelige Türen === */ @@ -103,10 +127,16 @@ z-index: 5; /* über den Flügeln */ } -/* === Doppeltür-Optik ohne zwei Flächen === */ - -/* Grundstil: Mittelnaht sichtbar */ +/* === DOPPELTÜR (für 6 und 24) – gleicher Look wie alle Türen, aber zwei Flügel === */ .door.double { + /* Basis wie deine anderen Türen */ + position: absolute; + display: flex; + justify-content: center; + align-items: center; + aspect-ratio: 1 / 1; + + /* gleicher Hintergrund wie alle anderen + goldene Naht in der Mitte */ background: linear-gradient( 90deg, @@ -121,22 +151,58 @@ ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); + border: 2px solid var(--ci-gold); border-radius: 12px; box-shadow: 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), inset 0 0 6px rgba(255,255,255,0.18); -} -/* Öffnungsanimation */ -.door.double.open { + /* Animation wie bei den anderen */ + transition: + transform 0.6s ease, + box-shadow 0.3s ease, + background 0.25s ease; + + /* damit die Flügel nach außen drehen können */ transform-origin: center; - transform: rotateY(-110deg); - box-shadow: - 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), - inset 0 0 10px rgba(255,255,255,0.2); + overflow: visible; } +/* Zahl bleibt oben drüber */ +.door.double span { + position: relative; + z-index: 5; +} + +/* zwei Flügel aus demselben Look wie die Tür */ +.door.double::before, +.door.double::after { + content: ""; + position: absolute; + top: 0; + width: 50%; + height: 100%; + background: inherit; + border-radius: inherit; + backface-visibility: hidden; + transition: transform 0.6s ease; + z-index: 1; +} + +/* linker Flügel – Scharnier links */ +.door.double::before { + left: 0; + transform-origin: left center; +} + +/* rechter Flügel – Scharnier rechts */ +.door.double::after { + right: 0; + transform-origin: right center; +} + +/* HOVER (geschlossen) – genauso wie bei den anderen, nur mit Naht */ .door.double:hover { transform: scale(1.05); background: @@ -154,4 +220,17 @@ box-shadow: 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), inset 0 0 10px rgba(255,255,255,0.25); +} + +/* GEÖFFNET: beide Flügel klappen nach außen */ +.door.double.open::before { + transform: rotateY(-115deg); +} +.door.double.open::after { + transform: rotateY(115deg); +} + +/* Hover auch im offenen Zustand */ +.door.double.open:hover { + transform: scale(1.05); } \ No newline at end of file