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