Banner-Slider auf der Startseite

Komponente banner-slider liest data/banners.json; banner.js übernimmt
Autoplay/Pause/Steuerung (progressive enhancement). Slider sitzt zwischen
Hero und Instagram-Feed. Bilder vorerst als Platzhalter-SVGs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv

public/assets/img/banners/bg-sample.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Platzhalter-Hintergrund">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2a2a2a"/>
+      <stop offset="0.55" stop-color="#3a1417"/>
+      <stop offset="1" stop-color="#e20612"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="400" fill="url(#g)"/>
+  <g fill="#ffffff" fill-opacity="0.05">
+    <circle cx="980" cy="90" r="160"/>
+    <circle cx="1120" cy="320" r="220"/>
+    <circle cx="760" cy="360" r="120"/>
+  </g>
+</svg>

public/assets/img/banners/placeholder-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
+  <rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
+  <text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
+  <text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 1</text>
+</svg>

public/assets/img/banners/placeholder-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
+  <rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
+  <text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
+  <text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 2</text>
+</svg>

public/assets/img/banners/placeholder-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
+  <rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
+  <text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
+  <text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 3</text>
+</svg>