.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; } }
🐰 Frohe Ostern! Unser Geschenk für dich: easter10 – Spare 10% auf jeden Kauf! Gültig: 04.04.–06.04.2026 🥚
Code in die Zwischenablage kopiert! ✓
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 }); });
Datei-Butler trans weiße Schrift Slogan dick upscaled
Zum Shop 🤖
  • Home
  • Support

Support

Alle Infos an einem Ort

Wie können wir helfen?

Wähle einfach den passenden Bereich aus, in dem du Unterstützung brauchst – so findest du schnell die richtigen Antworten und Hilfestellungen.

Account

Verwalte deine Daten, Bestellungen und Rechnungen an einem Ort. Passe schnell Einstellungen an oder ändere dein Passwort.

Mehr erfahren
Anleitung & Tutorials

Schau dir unsere Schritt-für-Schritt-Erklärungen, Videos und Tipps an, damit du den Datei-Butler optimal nutzen kannst.

Mehr erfahren
Technischer Support

Du hast eine Fehlermeldung oder etwas funktioniert nicht wie erwartet? Hier bist du richtig für schnelle Lösungen und Updates.

Mehr erfahren
FAQ

Wir haben die meistgestellten Fragen für dich zusammengefasst – vermutlich ist auch deine dabei! Falls nicht, gerne über Kontakt uns anschreiben.

Mehr erfahren

Kontakt & Individuelle Anpassungen​

Nichts gefunden oder brauchst du eine maßgeschneiderte Funktion? Melde dich direkt bei uns, wir finden sicher eine Lösung.

Anfrage stellen
Neuigkeiten und Informationen

Letzter Beitrag

Alle Beiträge auf einen Blick, schau dir gerne alles in Ruhe an. 

Bin neugierig, alle Artikel sehen