.easter-banner { position: fixed; top: 0; left: 0; width: 100%; background-color: #550088; color: #fff; text-align: center; padding: 12px 20px; font-weight: bold; font-size: 16px; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: slideDown 0.5s ease-out, colorPulse 3s infinite; } .easter-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10,1 a5,5 0 1,0 0,10 a5,5 0 1,0 0,-10 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"); background-size: 30px 30px; opacity: 0.3; z-index: -1; } .easter-copy-feedback { position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px); background-color: #333; color: white; padding: 8px 16px; border-radius: 4px; font-size: 14px; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.2); z-index: 10000; } .easter-copy-feedback.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .easter-code { background-color: #FFCB05; color: #333; padding: 3px 8px; border-radius: 4px; margin: 0 5px; display: inline-block; animation: bounce 2s infinite; box-shadow: 0 2px 5px rgba(0,0,0,0.2); position: relative; cursor: pointer; transition: all 0.2s ease; } .easter-code:hover { background-color: #FFD83A; transform: scale(1.05); } .easter-code:active { transform: scale(0.98); } .easter-code::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%); pointer-events: none; } .easter-banner-icons { display: inline-block; animation: jumpRotate 3s infinite; margin: 0 5px; font-size: 18px; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes colorPulse { 0% { background-color: #550088; } 50% { background-color: #7700bb; } 100% { background-color: #550088; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } } @keyframes jumpRotate { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(5deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(-5px) rotate(-5deg); } 100% { transform: translateY(0) rotate(0deg); } } .banner-spacer { height: 50px; } .easter-banner.scrolled { transform: translateY(-100%); transition: transform 0.3s ease-out; } .easter-banner.visible { transform: translateY(0); transition: transform 0.4s ease-out; } @media (max-width: 768px) { .banner-spacer { height: 100px; } .easter-banner { font-size: 14px; padding: 10px; } } document.addEventListener('DOMContentLoaded', function() { var banner = document.getElementById('easterBanner'); var spacer = document.getElementById('bannerSpacer'); var codeElement = document.getElementById('easterCode'); var feedback = document.getElementById('copyFeedback'); var scrollTimer; var lastScrollTop = 0; // Aktionszeitraum prüfen var now = new Date(); var startDate = new Date('2026-04-04T00:00:00'); var endDate = new Date('2026-04-06T23:59:59'); if (now endDate) { banner.style.display = 'none'; spacer.style.display = 'none'; return; } // Code kopieren bei Klick if (codeElement && feedback) { codeElement.addEventListener('click', function() { var code = this.textContent; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(code).then(function() { showFeedback(); }, function() { fallbackCopy(code); }); } else { fallbackCopy(code); } }); } function fallbackCopy(text) { var tempInput = document.createElement('input'); tempInput.style.position = 'absolute'; tempInput.style.left = '-9999px'; tempInput.value = text; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); showFeedback(); } function showFeedback() { feedback.classList.add('show'); setTimeout(function() { feedback.classList.remove('show'); }, 2000); } // Scroll: Banner ausblenden beim Runterscrollen, einblenden nach Pause window.addEventListener('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScrollTop && scrollTop > 10) { banner.classList.remove('visible'); banner.classList.add('scrolled'); } lastScrollTop = scrollTop; clearTimeout(scrollTimer); scrollTimer = setTimeout(function() { banner.classList.remove('scrolled'); banner.classList.add('visible'); }, 500); }, { passive: true }); });