adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -5,8 +5,8 @@
   font-style: normal;
   font-display: swap;
 }
- /* === Adventskalender Türchen – stabile Grundversion === */
 
+/* === Adventskalender Türchen – stabile Grundversion === */
 .door {
   position: absolute;
   display: flex;
@@ -14,7 +14,6 @@
   justify-content: center;
   aspect-ratio: 1 / 1;
 
-  /* Farbverlauf in Bratonien-CI */
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--ci-darkgreen) 35%, transparent),
@@ -39,15 +38,15 @@
 
   cursor: pointer;
   transition:
-    transform 0.25s ease,
-    box-shadow 0.25s ease,
+    transform 0.6s ease,
+    box-shadow 0.3s ease,
     background 0.25s ease;
 
-    transform-style: preserve-3d;
-    perspective: 800px;
+  transform-style: preserve-3d;
+  perspective: 800px;
 }
 
-/* Hover nur mit leichtem Leuchten und Zoom */
+/* Hover – leichtes Leuchten */
 .door:hover {
   transform: scale(1.05);
   background: linear-gradient(
@@ -60,26 +59,12 @@
     inset 0 0 10px rgba(255,255,255,0.25);
 }
 
-.door canvas {
-  pointer-events: none;
-}
-
-/* === Türöffnung nach Scharnier-Seite === */
-
-/* Scharnierpunkte */
+/* === 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: hinge-left → klappt nach links === */
+/* === Öffnung nach Scharnier-Seite === */
 .door.open.hinge-left {
   transform: rotateY(-115deg);
   box-shadow:
@@ -90,7 +75,6 @@
   transform: rotateY(-115deg) scale(1.05);
 }
 
-/* === Geöffneter Zustand: hinge-right → klappt nach rechts === */
 .door.open.hinge-right {
   transform: rotateY(115deg);
   box-shadow:
@@ -101,42 +85,10 @@
   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 === */
-
+/* === Doppeltüren (6 & 24) === */
 .door.double {
-  display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
-  overflow: hidden;
-}
-
-.door span {
-  position: relative;
-  z-index: 5; /* über den Flügeln */
-}
-
-/* === Doppeltüren (6 & 24) – gleiche Optik, goldene Mittelnaht === */
-
-.door.double {
-  /* identisch zu normalen Türen */
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1 / 1;
-
   background:
     linear-gradient(
       90deg,
@@ -149,31 +101,7 @@
       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);
-  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);
-
-  transition:
-    transform 0.6s ease,
-    box-shadow 0.3s ease,
-    background 0.25s ease;
-
-  transform-style: preserve-3d;
-  perspective: 800px;
 }
-
-/* Zahl bleibt oben sichtbar */
-.door.double span {
-  position: relative;
-  z-index: 5;
-}
-
-/* Hover – exakt wie bei den anderen Türen */
 .door.double:hover {
   transform: scale(1.05);
   background:
@@ -192,36 +120,31 @@
     0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
     inset 0 0 10px rgba(255,255,255,0.25);
 }
-
-/* Ö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);
 }
+.door.double.open:hover {
+  transform: rotateY(-8deg) scale(1.05);
+}
 
 /* === Unsichtbares Feld hinter geöffneter Tür === */
 .openfield {
   position: absolute;
-  /* Diese Werte werden über data-Attribute gesetzt, wenn du sie im Script positionierst */
   display: block;
-  opacity: 0;                /* unsichtbar */
-  pointer-events: none;      /* deaktiviert solange die Tür geschlossen ist */
+  opacity: 0;
+  pointer-events: none;
   transition: opacity 0.3s ease;
-  border-radius: 12px;       /* wie die Tür, damit es passt */
+  border-radius: 12px;
   cursor: pointer;
-  z-index: 1;                /* unter der Tür, aber vor dem Hintergrundbild */
+  z-index: 1;
 }
 
 /* Aktiviert, sobald die Nachbartür offen ist */
 .door.open + .openfield {
   opacity: 1;
-  pointer-events: auto;      /* jetzt klickbar */
-  z-index: 6;                /* über der geöffneten Tür */
-}
-
-.door.double.open:hover {
-  transform: rotateY(-8deg) scale(1.05);
+  pointer-events: auto;
+  z-index: 6;
 }