Ein großes zentrales Zitat mit dekorativem Anführungszeichen-Ornament und Akzent-Glow, darunter die Personen-Auswahl als Punkte. Die Stimmen wechseln sanft per Fade automatisch; Pfeile und Punkte steuern manuell. Bei prefers-reduced-motion ruht der Glow und der Auto-Wechsel ist aus — nur manuelle Steuerung. Der Auto-Wechsel pausiert bei Hover und Fokus.
<section class="ks-craft" aria-label="Kundenstimmen" data-ks-rotator>
<div class="ks-craft-glow" aria-hidden="true"></div>
<span class="ks-craft-mark" aria-hidden="true">“</span>
<p class="ks-craft-eyebrow">Kundenstimmen</p>
<div class="ks-craft-stage" aria-live="polite">
<figure class="ks-craft-slide is-on">
<blockquote>Man merkt in jedem Detail, dass hier mit <span>Anspruch</span>
gearbeitet wird.</blockquote>
<figcaption class="ks-craft-person">
<span class="ks-craft-ava" aria-hidden="true">LM</span>
<div><b>Lena Marquardt</b><small>Geschäftsführerin, Hamburg</small></div>
</figcaption>
</figure>
<!-- weitere <figure class="ks-craft-slide"> ohne is-on -->
</div>
<div class="ks-craft-nav">
<button type="button" class="ks-craft-arrow" data-ks-prev aria-label="Vorherige Stimme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
</button>
<div class="ks-craft-dots" role="tablist" aria-label="Stimme wählen"></div>
<button type="button" class="ks-craft-arrow" data-ks-next aria-label="Nächste Stimme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
</button>
</div>
</section>
<style>
.ks-craft{position:relative;width:100%;overflow:hidden;text-align:center;color:#e9e9ee;
background:radial-gradient(130% 120% at 50% -10%,#1c1c28 0%,#141319 55%,#101014 100%);
border:1px solid #26262c;border-radius:20px;padding:2.6rem 1.6rem 1.8rem}
@media(min-width:720px){.ks-craft{padding:3.4rem 3rem 2.2rem}}
.ks-craft-glow{position:absolute;width:300px;height:300px;top:-90px;left:50%;
transform:translateX(-50%);border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;
background:radial-gradient(circle,var(--akzent,#7c87ff) 0%,transparent 70%);
animation:ks-pulse 9s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes ks-pulse{0%{opacity:.35;transform:translateX(-50%) scale(1)}
100%{opacity:.6;transform:translateX(-50%) scale(1.15)}}
.ks-craft-mark{position:relative;z-index:1;font-family:Georgia,"Times New Roman",serif;
font-size:5rem;line-height:.6;color:var(--akzent,#7c87ff);opacity:.28;height:2.2rem}
.ks-craft-eyebrow{position:relative;z-index:1;margin:0 0 1.4rem;display:inline-flex;
align-items:center;gap:.6em;font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.ks-craft-eyebrow::before,.ks-craft-eyebrow::after{content:"";width:22px;height:1px;
background:var(--akzent,#7c87ff);opacity:.6}
.ks-craft-stage{position:relative;z-index:1;min-height:150px;display:grid}
.ks-craft-slide{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;
gap:1.3rem;opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .55s ease,transform .55s ease,visibility .55s;pointer-events:none}
.ks-craft-slide.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ks-craft-slide blockquote{margin:0;font-size:clamp(1.2rem,2.9vw,1.7rem);line-height:1.4;
font-weight:500;letter-spacing:-.01em;color:#f4f4f5;max-width:34ch;overflow-wrap:break-word}
.ks-craft-slide blockquote span{color:var(--akzent,#7c87ff)}
.ks-craft-person{display:flex;align-items:center;gap:.75rem}
.ks-craft-ava{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
font-size:.85rem;font-weight:800;color:#fff;
background:linear-gradient(135deg,var(--akzent,#7c87ff),#42466e)}
.ks-craft-person b{display:block;font-size:.9rem;color:#f4f4f5;line-height:1.2;text-align:left}
.ks-craft-person small{display:block;font-size:.78rem;color:#a1a1aa;text-align:left}
.ks-craft-nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
gap:1rem;margin-top:1.8rem}
.ks-craft-arrow{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
color:#e9e9ee;background:rgba(255,255,255,.05);border:1px solid #26262c;cursor:pointer;
transition:border-color .2s ease,background .2s ease,color .2s ease}
.ks-craft-arrow svg{width:16px;height:16px}
.ks-craft-arrow:hover,.ks-craft-arrow:focus-visible{color:#f4f4f5;border-color:var(--akzent,#7c87ff);
background:rgba(124,135,255,.12);outline:none}
.ks-craft-dots{display:flex;gap:.5rem}
.ks-craft-dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
background:#3a3a45;border:none;transition:background .25s ease,transform .25s ease}
.ks-craft-dot.is-on{background:var(--akzent,#7c87ff);transform:scale(1.25)}
.ks-craft-dot:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.ks-craft-glow{animation:none}
.ks-craft-slide{transition:opacity .001s}
}
</style>
<script>
document.querySelectorAll('[data-ks-rotator]').forEach((root) => {
const slides = [...root.querySelectorAll('.ks-craft-slide')];
const dots = root.querySelector('.ks-craft-dots');
if (slides.length < 2) return;
let i = 0, timer = null;
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
// Punkte erzeugen
slides.forEach((_, n) => {
const d = document.createElement('button');
d.type = 'button'; d.className = 'ks-craft-dot' + (n === 0 ? ' is-on' : '');
d.setAttribute('role', 'tab');
d.setAttribute('aria-label', 'Stimme ' + (n + 1));
d.addEventListener('click', () => go(n, true));
dots.appendChild(d);
});
const dotEls = [...dots.children];
function go(n, stop) {
slides[i].classList.remove('is-on'); dotEls[i].classList.remove('is-on');
i = (n + slides.length) % slides.length;
slides[i].classList.add('is-on'); dotEls[i].classList.add('is-on');
if (stop) pause();
}
function start() { if (!reduce && !timer) timer = setInterval(() => go(i + 1), 5000); }
function pause() { clearInterval(timer); timer = null; }
root.querySelector('[data-ks-next]').addEventListener('click', () => go(i + 1, true));
root.querySelector('[data-ks-prev]').addEventListener('click', () => go(i - 1, true));
// Auto-Wechsel bei Hover/Fokus anhalten, danach fortsetzen
root.addEventListener('mouseenter', pause);
root.addEventListener('mouseleave', start);
root.addEventListener('focusin', pause);
root.addEventListener('focusout', start);
start();
});
</script>