adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -64,28 +64,52 @@
   pointer-events: none;
 }
 
-/* Rückseite – nach dem Öffnen sichtbar */
+/* === Türöffnung nach Scharnier-Seite === */
-.door::after {
+
-  content: "";
+/* Scharnierpunkte */
-  position: absolute;
+.door.hinge-left  { transform-origin: left center; }
-  inset: 0;
+.door.hinge-right { transform-origin: right center; }
-  border-radius: inherit;
+.door.double      { transform-origin: center; }
-  background: rgba(255, 255, 255, 0.08); /* leicht transparent wie Loch */
+
-  box-shadow: inset 0 0 6px rgba(255,255,255,0.15);
+/* === Geschlossener Zustand === */
-  transform: rotateY(180deg);
+.door {
-  backface-visibility: hidden;
+  transition:
+    transform 0.6s ease,
+    box-shadow 0.3s ease,
+    background 0.25s ease;
 }
 
-/* Geöffneter Zustand */
+/* === Geöffneter Zustand: hinge-left → klappt nach links === */
-.door.open {
+.door.open.hinge-left {
-  transform: rotateY(180deg);
+  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 {
+/* === Geöffneter Zustand: hinge-right → klappt nach rechts === */
-  transform: rotateY(180deg) scale(1.05);
+.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 === */
+/* === DOPPELTÜR (für 6 und 24) – gleicher Look wie alle Türen, aber zwei Flügel === */
-
-/* Grundstil: Mittelnaht sichtbar */
 .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 */
+  /* Animation wie bei den anderen */
-.door.double.open {
+  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);
+  overflow: visible;
-  box-shadow:
-    0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent),
-    inset 0 0 10px rgba(255,255,255,0.2);
 }
 
+/* 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:
@@ -155,3 +221,16 @@
     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);
+}