adventskalender/2025/css/main.css aktualisiert

adventskalender/2025/css/main.css

@@ -6,11 +6,48 @@
   font-display: swap;
 }
 
-/* Anwendung für Türchen */
+/* === Adventstürchen – 2025 Look === */
 .door {
+  /* Positionierung & Größe */
+  position: absolute;
+  top: 20%;              /* Testposition, später anpassen */
+  left: 15%;
+  width: 12%;
+  aspect-ratio: 1 / 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Typografie */
   font-family: "Bratonien2025", cursive;
-  font-size: 2.3vw; /* Etwas größer, weil die Ziffern feine Linien haben */
+  font-size: 2.3vw;
   font-weight: 400;
   color: var(--ci-gold);
   text-shadow: 0 0 12px rgba(200,170,73,0.55);
+
+  /* Glasoptik & Rahmen */
+  background-color: rgba(255,255,255,0.16);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border: 2px solid var(--ci-gold);
+  border-radius: 12px;
+  box-shadow:
+    0 0 10px rgba(200,170,73,0.25),
+    inset 0 0 6px rgba(255,255,255,0.18);
+
+  /* Interaktion */
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.door:hover {
+  background-color: rgba(247,243,232,0.28);
+  box-shadow:
+    0 0 16px rgba(200,170,73,0.5),
+    inset 0 0 10px rgba(255,255,255,0.35);
+  transform: scale(1.04);
 }