diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 25e0725..d725430 100644 --- a/adventskalender/2025/css/main.css +++ b/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); } \ No newline at end of file