diff --git a/adventskalender/2025/css/day.css b/adventskalender/2025/css/day.css index c484aae..84fafaf 100644 --- a/adventskalender/2025/css/day.css +++ b/adventskalender/2025/css/day.css @@ -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 (768–1024 px) */ -@media (min-width: 768px) and (max-width: 1024px) { - .popup-day { - max-width: 92vw; - } -} - -/* Kleine Laptops / Standard-Desktops (1025–1599 px) */ -@media (min-width: 1025px) and (max-width: 1599px) { - .popup-day { - max-width: 80vw; - } -} - -/* Große Monitore (1600–2559 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; - } } \ No newline at end of file diff --git a/adventskalender/2025/css/popup.css b/adventskalender/2025/css/popup.css index 7d151eb..9040aba 100644 --- a/adventskalender/2025/css/popup.css +++ b/adventskalender/2025/css/popup.css @@ -1,12 +1,10 @@ -/* Bratonien Adventskalender 2025 – Popup Design (hell & festlich) */ +/* Bratonien Adventskalender 2025 – Popup Design (bandbreitenoptimiert, hell & festlich) */ +/* === Overlay === */ #popup-overlay { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(247, 243, 232, 0.88); /* leicht gold-creamiger Schleier */ + inset: 0; + background: rgba(247, 243, 232, 0.88); backdrop-filter: blur(6px) brightness(1.05); -webkit-backdrop-filter: blur(6px) brightness(1.05); display: none; @@ -20,6 +18,7 @@ animation: fadeIn 0.3s ease; } +/* === Popup-Box === */ #popup-box { background: linear-gradient( 180deg, @@ -29,19 +28,29 @@ border: 2px solid var(--ci-gold); border-radius: 16px; box-shadow: - 0 0 20px color-mix(in srgb, var(--ci-gold) 40%, transparent), + 0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent), inset 0 0 10px rgba(255, 255, 255, 0.4); - max-width: 640px; - width: 90%; - max-height: 85%; + width: clamp(320px, 94vw, 1600px); /* Default für sehr kleine Geräte */ + max-height: 90vh; overflow-y: auto; - padding: 2.5rem 2rem; + padding: clamp(1.5rem, 2vw, 3rem); color: #333; text-align: center; animation: popIn 0.35s ease; position: relative; + backdrop-filter: blur(3px); + transition: width 0.3s ease, padding 0.3s ease; } +/* === Inhalt === */ +#popup-content { + margin-top: 1rem; + font-family: "Bratonien2025", cursive; + font-size: clamp(1rem, 1.2vw, 1.5rem); + line-height: 1.6; +} + +/* === Close-Button === */ #popup-close { position: absolute; top: 12px; @@ -59,15 +68,7 @@ color: color-mix(in srgb, var(--ci-blue) 35%, var(--ci-gold)); } -#popup-content { - margin-top: 1rem; - font-family: "Bratonien2025", cursive; - font-size: 1.3rem; - line-height: 1.6; -} - /* === Animationen === */ - @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } @@ -78,15 +79,57 @@ 100% { transform: scale(1); opacity: 1; } } -/* === Mobile Anpassung === */ +/* === Geräteoptimierungen === */ +/* Smartphones bis 600 px */ @media (max-width: 600px) { #popup-box { - width: 92%; - padding: 1.8rem 1.4rem; + width: 94vw; + padding: 1.4rem; font-size: 1rem; } #popup-close { font-size: 1.6rem; } +} + +/* Kleine Tablets (600–899 px) */ +@media (min-width: 601px) and (max-width: 899px) { + #popup-box { + width: 90vw; + padding: 1.6rem; + } +} + +/* Tablets & kleine Laptops (900–1279 px) */ +@media (min-width: 900px) and (max-width: 1279px) { + #popup-box { + width: 85vw; + padding: 2rem; + } +} + +/* Standard-Laptops & Desktops (1280–1599 px) */ +@media (min-width: 1280px) and (max-width: 1599px) { + #popup-box { + width: 80vw; + padding: 2.2rem 3rem; + } +} + +/* Große Monitore (1600–1919 px) */ +@media (min-width: 1600px) and (max-width: 1919px) { + #popup-box { + width: 75vw; + padding: 2.5rem 3.5rem; + } +} + +/* 4K und Ultrawide (≥1920 px) */ +@media (min-width: 1920px) { + #popup-box { + width: 70vw; + max-width: 1800px; + padding: 3rem 4rem; + } } \ No newline at end of file