adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -6,7 +6,7 @@
   font-display: swap;
 }
 
-/* === Türchen-Stil === */
+/* === Adventskalender Türchen (finale Version mit Glitzern) === */
 .door {
   position: absolute;
   display: flex;
@@ -14,7 +14,7 @@
   justify-content: center;
   aspect-ratio: 1 / 1;
 
-  /* Verlauf auf Basis der CI-Farben */
+  /* Basis-Verlauf – CI-Farben mit Transparenz */
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--ci-darkgreen) 35%, transparent),
@@ -29,7 +29,6 @@
     0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent),
     inset 0 0 6px rgba(255,255,255,0.18);
 
-  /* Schrift */
   font-family: "Bratonien2025", cursive;
   font-size: 2.3vw;
   font-weight: 400;
@@ -45,23 +44,34 @@
     background 0.2s ease;
 }
 
-/* Glitzer-Animation */
-@keyframes glitter {
+/* === Keyframes === */
+@keyframes glitter-sheen {
   0%   { background-position: -200% 0; opacity: 0.0; }
   30%  { opacity: 1; }
   70%  { opacity: 1; }
   100% { background-position: 200% 0; opacity: 0.0; }
 }
 
-/* Hover-Effekt mit goldenem Glitzern */
+@keyframes sparkle {
+  0%,100% { opacity: 0; }
+  40%,60% { opacity: 1; }
+}
+
+/* === Hover Effekte === */
+.door:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 0 16px color-mix(in srgb, var(--ci-gold) 60%, transparent),
+    inset 0 0 10px rgba(255,255,255,0.35);
+}
+
+/* Goldener Schimmer über dem Türchen */
 .door:hover::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
-
-  /* goldener Lichtschimmer */
   background: linear-gradient(
     120deg,
     transparent 0%,
@@ -69,4 +79,20 @@
     transparent 90%
   );
   background-size: 200% 100%;
-  animation: glitter 1.8s ease-in-out 1;
+  animation: glitter-sheen 1.8s ease-in-out 1;
+}
+
+/* Kleine Glitzerpunkte */
+.door:hover::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-image:
+    radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%),
+    radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
+  background-size: 10% 10%, 8% 8%;
+  background-position: 40% 30%, 70% 65%;
+  animation: sparkle 1.8s ease-in-out 1;
+}