optical enhancement in popup

This commit is contained in:
2025-11-10 17:51:51 +01:00
parent c6942b581a
commit b8204de85b
2 changed files with 66 additions and 82 deletions

View File

@@ -1,19 +1,7 @@
/* Bratonien Adventskalender 2025 day.css
Voll responsive Darstellung der Türcheninhalte
Gestaltung der Türcheninhalte (ohne Popup-Layout)
*/
/* === POPUP-BASIS === */
.popup-day {
width: 100%;
max-width: clamp(320px, 85vw, 1800px);
margin: 0 auto;
padding: clamp(1rem, 2vw, 3rem);
text-align: center;
color: var(--ci-darkgreen);
font-family: "Bratonien2025", cursive;
box-sizing: border-box;
}
.popup-day h3 {
font-size: clamp(1.2rem, 2vw, 2.2rem);
color: var(--ci-gold);
@@ -58,7 +46,6 @@
0 0 24px color-mix(in srgb, var(--ci-blue) 20%, transparent);
}
/* verhindert Layoutsprung beim Laden */
.video-wrapper::before {
content: "";
display: block;
@@ -80,50 +67,4 @@
/* === AUDIO === */
audio {
display: none;
}
/* === RESPONSIVE FEINANPASSUNG === */
/* Smartphones (bis ca. 480 px) */
@media (max-width: 480px) {
.popup-day {
padding: 1rem 0.5rem 1.5rem;
}
.popup-day h3 {
font-size: 1.1rem;
}
}
/* Tablets (7681024 px) */
@media (min-width: 768px) and (max-width: 1024px) {
.popup-day {
max-width: 92vw;
}
}
/* Kleine Laptops / Standard-Desktops (10251599 px) */
@media (min-width: 1025px) and (max-width: 1599px) {
.popup-day {
max-width: 80vw;
}
}
/* Große Monitore (16002559 px) */
@media (min-width: 1600px) and (max-width: 2559px) {
.popup-day {
max-width: 72vw;
}
}
/* Ultrawide / 4K */
@media (min-width: 2560px) {
.popup-day {
max-width: 65vw;
padding: 3rem 2rem 4rem;
}
.popup-day h3 {
font-size: 2.4rem;
}
}