adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -1,3 +1,4 @@
+/* === Schriftart Bratonien 2025 === */
 @font-face {
   font-family: "Bratonien2025";
   src: url("../../shared/fonts/PinyonScript-Regular.ttf") format("truetype");
@@ -6,7 +7,7 @@
   font-display: swap;
 }
 
-/* === Adventskalender Türchen – stabile Grundversion === */
+/* === Adventskalender-Türchen – Grundlayout === */
 .door {
   position: absolute;
   display: flex;
@@ -14,6 +15,7 @@
   justify-content: center;
   aspect-ratio: 1 / 1;
 
+  /* Farbverlauf im Bratonien-Stil */
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--ci-darkgreen) 35%, transparent),
@@ -46,8 +48,9 @@
   perspective: 800px;
 }
 
-/* Hover – leichtes Leuchten */
+/* === Hover-Effekt (Glitzer etc.) === */
-.door:hover {
+.door:hover,
+.door.hover-proxy {
   transform: scale(1.05);
   background: linear-gradient(
     180deg,
@@ -59,30 +62,27 @@
     inset 0 0 10px rgba(255,255,255,0.25);
 }
 
-/* === Scharnierpunkte === */
+/* === Scharniere === */
 .door.hinge-left  { transform-origin: left center; }
 .door.hinge-right { transform-origin: right center; }
 .door.double      { transform-origin: center; }
 
-/* === Öffnung nach Scharnier-Seite === */
+/* === Öffnen nach Seite === */
 .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.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-left:hover,
 .door.open.hinge-right:hover {
-  transform: rotateY(115deg) scale(1.05);
+  transform: scale(1.05) rotateY(var(--open-rotate));
 }
 
 /* === Doppeltüren (6 & 24) === */
@@ -102,7 +102,8 @@
       color-mix(in srgb, var(--ci-blue) 35%, transparent)
     );
 }
-.door.double:hover {
+.door.double:hover,
+.door.double.hover-proxy {
   transform: scale(1.05);
   background:
     linear-gradient(
@@ -130,7 +131,7 @@
   transform: rotateY(-8deg) scale(1.05);
 }
 
-/* === Offenes Türchen – realistischer Plastikfolien-Look === */
+/* === Offenes Türchen – realistische Folie === */
 .openfield {
   position: absolute;
   display: block;
@@ -146,13 +147,11 @@
     background 0.4s ease;
 }
 
-/* sichtbar, wenn Tür offen ist */
+/* Sichtbar, wenn Tür geöffnet */
 .door.open + .openfield {
   opacity: 1;
   pointer-events: auto;
   z-index: 6;
-
-  /* halbtransparente Plastikfolie mit Glanz */
   background:
     linear-gradient(
       130deg,
@@ -164,23 +163,18 @@
     rgba(0, 0, 0, 0.12);
   backdrop-filter: blur(2px) brightness(1.08);
   -webkit-backdrop-filter: blur(2px) brightness(1.08);
-
-  /* Rahmen & Tiefe */
   border: 2px solid color-mix(in srgb, var(--ci-gold) 85%, transparent);
   box-shadow:
     inset 0 4px 8px rgba(0, 0, 0, 0.6),
     inset 0 -3px 6px rgba(0, 0, 0, 0.5),
     0 0 10px rgba(0, 0, 0, 0.35),
     0 0 14px color-mix(in srgb, var(--ci-gold) 15%, transparent);
-
   transform: translateZ(-1px);
 }
 
-/* Gemeinsames Hover-Verhalten über JS-Sync */
+/* Hover / Proxy-Hover für offene Felder */
-.door.hover-sync,
+.door.open + .openfield:hover,
-.door.open:hover,
+.openfield.hover-proxy {
-.openfield.hover-sync,
-.door.open + .openfield:hover {
   transform: scale(1.05);
   background:
     linear-gradient(
@@ -192,5 +186,19 @@
     rgba(0, 0, 0, 0.12);
   box-shadow:
     0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
-    inset 0 0 10px rgba(255, 255, 255, 0.25);
+    inset 0 0 10px rgba(255,255,255,0.25);
+}
+
+/* Hover-Sync durch JS: löst echten Hover-Stil aus */
+.door.hover-proxy,
+.door.open:hover {
+  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);
 }