Canada / Français
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById("smc-local-header");
const wrapper = document.getElementById("smc-local-header-wrapper");
const closeIcon = document.getElementById("smc-local-header-close");
let autoCloseTimer;
function slideUpAndClose() {
// äußerer Wrapper
const zielElement = wrapper || (container ? container.parentElement : null);
if (!zielElement) return;
// Holt die exakte, aktuell gerenderte Höhe des Elements vor dem Schließen
const startHoehe = zielElement.getBoundingClientRect().height || 65;
// Schaltet CSS-Bremsen und Mindesthöhen beim äußeren Wrapper ab
zielElement.style.setProperty("transition", "none", "important");
zielElement.style.setProperty("min-height", "0px", "important");
zielElement.style.overflow = "hidden";
// Bereitet den inneren Container auf das Mitverschieben vor
if (container) {
container.style.setProperty("transition", "none", "important");
}
const animationsDauer = 600;
const startZeit = performance.now();
function animate(jetztZeit) {
let vergangeneZeit = jetztZeit - startZeit;
let fortschritt = Math.min(vergangeneZeit / animationsDauer, 1);
// Sanfter Brems-Effekt (Ease-Out)
let easeOutProgress = 1 - Math.pow(1 - fortschritt, 3);
// Berechnet die schrumpfende Höhe des äußeren Wrappers
let aktuelleHoehe = startHoehe * (1 - easeOutProgress);
// Berechnet, wie weit der innere Container nach oben geschoben werden muss
let verschiebung = startHoehe * easeOutProgress;
// Verringert die Höhe des Wrappers
zielElement.style.setProperty("height", aktuelleHoehe + "px", "important");
// Schiebt den inneren Container synchron mit nach oben
if (container) {
container.style.setProperty("transform", `translateY(-${verschiebung}px)`, "important");
}
if (fortschritt < 1) {
requestAnimationFrame(animate);
} else {
// Am Ende den Wrapper komplett löschen
zielElement.remove();
}
}
requestAnimationFrame(animate);
}
// Erstbesucher-Logik
if (container && !localStorage.getItem("smc_header_gesehen")) {
// Äußeren Wrapper einblenden (hebt display: none auf)
const zielElement = wrapper || container.parentElement;
if (zielElement) {
zielElement.style.setProperty("display", "block", "important");
// WICHTIG: Erzwingt ein Browser-Reflow, damit das Element "ankommt"
void zielElement.offsetHeight;
}
// Wir erzwingen hier KEIN block-Layout mehr, um Flexbox nicht zu zerstören
container.style.setProperty("display", "flex", "important");
// WICHTIG FÜR GEO-REDIRECTS: Sofort als "gesehen" markieren!
// Falls der Nutzer die Seite vor Ablauf der 15sek wechselt,
// poppt der Header auf der nächsten Sprachseite nicht erneut auf.
localStorage.setItem("smc_header_gesehen", "true");
// 15 Sekunden automatischer Timer
autoCloseTimer = setTimeout(slideUpAndClose, 30000);
// Klick-Event für das Schließen-Icon
if (closeIcon) {
closeIcon.addEventListener("click", slideUpAndClose);
}
} else {
// Falls schon gesehen, direkt alles löschen
const zielElement = wrapper || (container ? container.parentElement : null);
if (zielElement) zielElement.remove();
}
});
