<a
class="mz-cta"
href="#"
onclick="return false;"
title="Angebot – aktuelle Angebote & Aktionen"
aria-label="Angebot – aktuelle Angebote & Aktionen"
>ANGEBOT
👉
.mz-slider{
position:relative; width:100%; max-width:100vw; overflow:hidden; line-height:0;
/* Höhe: Viewport - 200px (mit Grenzen) */
--slider-h: clamp(360px, calc(100vh - 200px), 90vh);
height: var(--slider-h);
/* CTA-Position (Desktop) */
--cta-bottom: 240px;
--cta-ml: 220px;
--mz-arrow-size: clamp(100px, 8vw, 160px);
--mz-arrow-offset: clamp(10px, 2vw, 24px);
--mz-arrow-color:#111; --mz-arrow-color-hover:#000;
--mz-transition:420ms cubic-bezier(.22,.61,.36,1);
}
/* Track/Slides */
.mz-track, .mz-slide{ height:100%; }
.mz-track{ display:flex; margin:0!important; padding:0!important; list-style:none!important;
transition:transform var(--mz-transition); will-change:transform; touch-action:pan-y; }
.mz-track li{ list-style:none!important; margin:0!important; padding:0!important; }
.mz-track li::marker{ content:"" !important; display:none !important; }
.mz-slide{ flex:0 0 100%; width:100%; }
.mz-slide img{
display:block; width:100%; height:100%;
object-fit:cover; object-position:center;
}
/* CTA */
.mz-cta{
--cta-alpha: .2;
--cta-alpha-hover: .3;
position:absolute; left:0; bottom:var(--cta-bottom); margin-left:var(--cta-ml);
display:inline-block; text-align:left;
padding:12px 80px; /* Größe bleibt überall gleich */
outline:2px solid #000; outline-offset:0;
background:rgba(255,255,255,var(--cta-alpha));
color:#000 !important; text-decoration:none;
font-family:"Open Sans", Arial, Helvetica, sans-serif; font-weight:700; line-height:1;
z-index:4; -webkit-tap-highlight-color:transparent;
transition: background-color .12s ease, color .12s ease;
}
.mz-cta-emoji{ display:inline-block; transition: transform .12s ease; }
.mz-cta:hover .mz-cta-emoji,
.mz-cta:focus-visible .mz-cta-emoji{ transform: translateX(5px); }
.mz-cta:hover, .mz-cta:focus-visible{
background:rgba(255,255,255,var(--cta-alpha-hover));
color:#000;
}
/* Pfeile ohne Hintergrund */
.mz-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:var(--mz-arrow-size); height:var(--mz-arrow-size);
border:none; background:none; color:var(--mz-arrow-color);
cursor:pointer; padding:0; display:grid; place-items:center;
transition:color 180ms ease, transform 120ms ease; z-index:3;
}
.mz-nav:hover,.mz-nav:focus-visible{ color:var(--mz-arrow-color-hover); outline:none; }
.mz-nav:active{ transform:translateY(-50%) scale(0.95); }
.mz-nav svg{ width:100%; height:100%; display:block; }
.mz-prev{ left:var(--mz-arrow-offset); } .mz-next{ right:var(--mz-arrow-offset); }
/* Desktop-Korrektur: absolutes Left statt margin-left */
.mz-cta{ left: 236px; margin-left: 0; }
/* --------- BREAKPOINTS (Reihenfolge wichtig!) --------- */
/* Tablet & kleiner */
@media (max-width: 980px){
.mz-cta{ left: clamp(32px, 5vw, 80px); }
}
/* Kleinster Breakpoint – überschreibt 980px-regel explizit */
@media (max-width: 600px){
/* CTA: gleich groß, aber 100px weiter nach unten und 200px nach links */
.mz-cta{
left: 60px; /* vorher 280px → jetzt 200px weiter links */
bottom: calc(var(--cta-bottom) - 50px);
padding: 12px 80px; /* Größe unverändert */
}
/* Pfeile bleiben weiter oben */
.mz-nav{
top: 35%;
transform: translateY(-50%);
}
.mz-prev{ left: 24px; }
.mz-next{ right: 24px; }
}
(function(){
const root = document.currentScript.previousElementSibling.previousElementSibling;
const track = root.querySelector('.mz-track');
const slides = Array.from(root.querySelectorAll('.mz-slide'));
const prev = root.querySelector('.mz-prev');
const next = root.querySelector('.mz-next');
const cta = root.querySelector('.mz-cta');
let index = 0;
const goTo = (i)=>{
index = (i + slides.length) % slides.length;
track.style.transform = `translateX(${-100 * index}%)`;
slides.forEach((s,idx)=> s.classList.toggle('is-active', idx===index));
autoContrast();
};
// Navigation
const onPrev = ()=>{ stopAutoplay(); goTo(index - 1); startAutoplay(); };
const onNext = ()=>{ stopAutoplay(); goTo(index + 1); startAutoplay(); };
prev.addEventListener('click', onPrev);
next.addEventListener('click', onNext);
// Tastatur
root.setAttribute('tabindex','0');
root.addEventListener('keydown', (e)=>{
if(e.key === 'ArrowLeft'){ e.preventDefault(); onPrev(); }
if(e.key === 'ArrowRight'){ e.preventDefault(); onNext(); }
});
// Swipe
let startX=0, dx=0, dragging=false;
const start = x=>{ dragging=true; startX=x; dx=0; track.style.transition='none'; stopAutoplay(); };
const move = x=>{ if(!dragging) return; dx=x-startX; track.style.transform=`translateX(${dx/innerWidth*-100 - 100*index}%)`; };
const end = ()=>{
if(!dragging) return;
track.style.transition='';
const th=innerWidth*0.08;
Math.abs(dx)>th ? goTo(index+(dx<0?1:-1)) : goTo(index);
dragging=false; dx=0; startAutoplay();
};
track.addEventListener('pointerdown', e=>{ e.preventDefault(); start(e.clientX); });
track.addEventListener('pointermove', e=> move(e.clientX));
track.addEventListener('pointerup', end);
track.addEventListener('pointercancel',end);
track.addEventListener('pointerleave', end);
// AUTOPLAY 4s + Pause bei Hover/Fokus
const INTERVAL = 4000;
let autoplayId = null;
function startAutoplay(){
if(autoplayId) return;
autoplayId = setInterval(()=> goTo(index + 1), INTERVAL);
}
function stopAutoplay(){
if(!autoplayId) return;
clearInterval(autoplayId); autoplayId = null;
}
root.addEventListener('mouseenter', stopAutoplay);
root.addEventListener('mouseleave', startAutoplay);
root.addEventListener('focusin', stopAutoplay);
root.addEventListener('focusout', startAutoplay);
document.addEventListener('visibilitychange', ()=>{ document.hidden ? stopAutoplay() : startAutoplay(); });
// Kontrast-Auto
function setCtaAlpha(a){
cta.style.setProperty('--cta-alpha', a.toFixed(2));
cta.style.setProperty('--cta-alpha-hover', Math.min(a+0.1, 0.5).toFixed(2));
}
function autoContrast(){
try{
const img = slides[index].querySelector('img');
if(!img || !img.naturalWidth) { setCtaAlpha(.2); return; }
const imgRect = img.getBoundingClientRect();
const ctaRect = cta.getBoundingClientRect();
const sxDisp = Math.max(0, Math.min(ctaRect.left + 10 - imgRect.left, imgRect.width-1));
const syDisp = Math.max(0, Math.min(ctaRect.top + ctaRect.height/2 - imgRect.top, imgRect.height-1));
const swDisp = Math.max(1, Math.min(ctaRect.width - 20, imgRect.width - sxDisp));
const shDisp = Math.max(1, Math.min(ctaRect.height, imgRect.height - syDisp));
const scaleX = img.naturalWidth / imgRect.width;
const scaleY = img.naturalHeight / imgRect.height;
const sx = Math.floor(sxDisp * scaleX);
const sy = Math.floor(syDisp * scaleY);
const sw = Math.max(1, Math.floor(swDisp * scaleX));
const sh = Math.max(1, Math.floor(shDisp * scaleY));
const canvas = document.createElement('canvas');
canvas.width = 64; canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
const data = ctx.getImageData(0,0,canvas.width,canvas.height).data;
let sum = 0, count = 0;
for(let p=0; p<data.length; p+=4){
const r=data[p], g=data[p+1], b=data[p+2];
const lum = 0.2126*r + 0.7152*g + 0.0722*b;
sum += lum; count++;
}
const avg = sum / count;
let a = .2;
if(avg > 210) a = .4;
else if(avg > 180) a = .3;
setCtaAlpha(a);
}catch(e){
setCtaAlpha(.2);
}
}
window.addEventListener('resize', autoContrast);
window.addEventListener('load', autoContrast);
requestAnimationFrame(()=> { goTo(0); startAutoplay(); });
})();
