diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 610841d..47b2387 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -127,16 +127,16 @@ z-index: 5; /* über den Flügeln */ } -/* === DOPPELTÜR (für 6 und 24) – gleicher Look wie alle Türen, aber zwei Flügel === */ +/* === Doppeltüren (6 & 24) – gleiche Optik, goldene Mittelnaht === */ + .door.double { - /* Basis wie deine anderen Türen */ + /* identisch zu normalen 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, @@ -158,51 +158,22 @@ 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), inset 0 0 6px rgba(255,255,255,0.18); - /* 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; - overflow: visible; + transform-style: preserve-3d; + perspective: 800px; } -/* Zahl bleibt oben drüber */ +/* Zahl bleibt oben sichtbar */ .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 */ +/* Hover – exakt wie bei den anderen Türen */ .door.double:hover { transform: scale(1.05); background: @@ -222,15 +193,15 @@ 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); +/* Öffnen – mittige Bewegung, leicht nach außen geneigt */ +.door.double.open { + transform-origin: center; + 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); } -/* Hover auch im offenen Zustand */ .door.double.open:hover { - transform: scale(1.05); + transform: rotateY(-8deg) scale(1.05); } \ No newline at end of file