Lay the slider controls over the picture like the Kant-IT hero in 1.11.4

Round white arrows left and right, dots bottom right with the active one as
an accent bar, a small pause button and no counter - the design of the hero
slider on kant-it.de. Slider and controls share a positioned shell; arrows
hide on phones. New style property for the active dot colour.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/assets/slider.js

@@ -56,9 +56,9 @@ export function initSliders(doc = document) {
       go(direction > 0 ? (last ? visible[0] : visible[Math.min(visible.length - 1, position + 1)]) : (first ? visible.at(-1) : visible[Math.max(0, position - 1)]));
     };
     const manual = action => { playing = false; clearTimeout(timer); update(); action(); };
-    const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1)));
+    const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1))); previous.className = 'slider-prev';
     const count = doc.createElement('span'); count.className = 'slider-position'; controls.append(count);
-    const next = button('→', 'Nächste Folie', () => manual(() => step(1)));
+    const next = button('→', 'Nächste Folie', () => manual(() => step(1))); next.className = 'slider-next';
     const dots = [];
     if (slider.classList.contains('slider-dots')) {
       const group = doc.createElement('div'); group.className = 'slider-control-dots'; controls.append(group);
@@ -67,6 +67,7 @@ export function initSliders(doc = document) {
       });
     }
     const play = seconds >= 3 ? button('', 'Automatische Wiedergabe pausieren', () => { playing = !playing; update(); schedule(); }) : null;
+    if (play) play.className = 'slider-play';
     const update = () => {
       const visible = available();
       const fits = visible.length < 2 || slider.scrollWidth <= slider.clientWidth + 2;
@@ -74,7 +75,7 @@ export function initSliders(doc = document) {
       const index = active(); count.textContent = `${Math.max(0, visible.indexOf(index) + 1)} / ${visible.length}`;
       dots.forEach((dot, i) => { dot.hidden = !visible.includes(i); dot.setAttribute('aria-pressed', String(i === index)); });
       if (play) {
-        play.textContent = playing ? 'Pause' : 'Wiedergabe';
+        play.textContent = playing ? 'Pause' : 'Wiedergabe'; play.dataset.playing = String(playing);
         play.setAttribute('aria-label', playing ? 'Automatische Wiedergabe pausieren' : 'Automatische Wiedergabe starten');
         play.disabled = reduced(); play.title = reduced() ? 'Automatik ist bei reduzierter Bewegung deaktiviert.' : '';
       }
@@ -84,7 +85,11 @@ export function initSliders(doc = document) {
       if (playing && !reduced()) timer = setTimeout(() => { if (playing && !hover && visible && !doc.hidden) step(1); schedule(); }, seconds * 1000);
     };
     const pause = () => { playing = false; update(); clearTimeout(timer); };
-    slider.after(controls); slider.classList.add('slider-controlled'); update();
+    // Slider and controls share a positioned shell, so arrows and dots can lie on the picture
+    // the way the Kant-IT hero slider draws them.
+    const shell = doc.createElement('div'); shell.className = 'slider-shell';
+    slider.replaceWith(shell); shell.append(slider, controls);
+    slider.classList.add('slider-controlled'); update();
     slider.addEventListener('scroll', update, { passive: true, signal });
     view.addEventListener('resize', update, { passive: true, signal });
     slider.addEventListener('pointerenter', () => { hover = true; }, { signal });
@@ -98,7 +103,7 @@ export function initSliders(doc = document) {
     const resize = new view.ResizeObserver(update); resize.observe(slider);
     preference.addEventListener('change', () => { if (reduced()) pause(); update(); }, { signal });
     schedule();
-    cleanups.push(() => { clearTimeout(timer); clearInterval(settle); slider.style.scrollSnapType = ''; events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
+    cleanups.push(() => { clearTimeout(timer); clearInterval(settle); slider.style.scrollSnapType = ''; events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); shell.replaceWith(slider); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
   });
   return () => cleanups.forEach(cleanup => cleanup());
 }