Banner-Slider: Beispiel-Anzeige Breadcrumb Solutions

Zweite Slide als echte Sponsoren-Anzeige (Hero-Foto + Wortmarken-Logo,
self-hosted). Komponente erweitert um cta_secondary (Outline-Button) und
logo_light (weiße Logo-Platte für dunkle Firmenlogos). CTAs verlinken extern
(target=_blank, rel=sponsored) auf Lösungen + Über uns. Mit zwei Slides
aktiviert der Slider Auto-Rotation und Indikatoren.

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

public/assets/css/components.css

@@ -1021,6 +1021,13 @@
     color: var(--clr-text-muted);
 }
 
+/* CTA-Reihe: Primär- + optionaler Outline-Sekundär-Button nebeneinander. */
+.ad-banner__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
 .ad-banner__logo {
     display: grid;
     place-items: center;
@@ -1031,6 +1038,14 @@
     border-radius: var(--radius-card);
 }
 
+/* Helle Platte für dunkle Firmenlogos (Wortmarken). Überschreibt auch die
+   dunkle Logo-Box der Foto-Variante (gleiche Spezifität, später im File). */
+.ad-banner__logo.ad-banner__logo--light {
+    background: #fff;
+    border-color: rgb(255 255 255 / 0.55);
+    backdrop-filter: none;
+}
+
 .ad-banner__logo img {
     width: auto;
     max-width: 100%;
@@ -2238,27 +2253,29 @@
 .department-choice__card {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.35rem;
     height: 100%;
-    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
+    padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
     border-radius: var(--radius-card);
 }
 
-.department-choice__kicker {
-    font-size: var(--fs-400);
+.department-choice__heading {
+    font-size: var(--fs-700);
+    line-height: var(--lh-heading);
+    color: var(--clr-text);
+}
+
+.department-choice__subtitle {
+    font-size: var(--fs-500);
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
     color: var(--clr-accent);
 }
 
-.department-choice__heading {
-    font-size: var(--fs-650);
-    line-height: var(--lh-heading);
-}
-
 .department-choice__text {
+    margin-top: 0.65rem;
     color: var(--clr-text-muted);
 }
 
@@ -2283,7 +2300,7 @@
 }
 
 .fee-table__title {
-    font-size: var(--fs-600);
+    font-size: var(--fs-650);
     line-height: var(--lh-heading);
     margin-bottom: 1rem;
 }
@@ -2324,40 +2341,34 @@
     color: var(--clr-text-muted);
 }
 
-.fee-table-grid {
-    display: grid;
-    gap: 1.5rem;
-    margin-top: 2rem;
-}
-
-@media (min-width: 768px) {
-    .fee-table-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        align-items: start;
-    }
-}
-
 /* === membership (Mitglied werden) === */
-.membership-info__inner {
-    max-width: 70ch;
-}
-
-.membership-info__inner p {
-    margin-top: 1rem;
-}
-
 .membership-signup__inner {
     max-width: 820px;
     margin-inline: auto;
 }
 
+/* Zentrierter, ruhiger Sektions-Kopf (einheitlich mit instagram/partners) */
+.membership-signup__head {
+    max-width: 60ch;
+    margin: 0 auto 2.5rem;
+    text-align: center;
+}
+
 .membership-signup__intro {
-    max-width: 65ch;
-    margin: 1rem 0 2rem;
+    margin-top: 1rem;
     color: var(--clr-text-muted);
 }
 
-/* Fußball-Sektion: Beitragstabelle hat Abstand zum Formular */
+/* Beitragstabelle und Formular mittig, schlanke Spaltenbreite für Lesbarkeit */
+.membership-signup .fee-table {
+    max-width: 560px;
+    margin-inline: auto;
+}
+
+.membership-signup .form {
+    margin-inline: auto;
+}
+
 .membership-signup .fee-table + .form {
     margin-top: 2rem;
 }
@@ -2365,7 +2376,7 @@
 .membership-notes {
     display: grid;
     gap: 1.5rem;
-    margin: 0 0 2rem;
+    margin: 0 0 2.5rem;
     padding: 0;
     list-style: none;
 }
@@ -2377,7 +2388,7 @@
 }
 
 .membership-notes__title {
-    font-size: var(--fs-600);
+    font-size: var(--fs-650);
     line-height: var(--lh-heading);
     margin-bottom: 0.4rem;
     padding-top: 0.75rem;
@@ -2385,7 +2396,7 @@
 }
 
 .membership-download {
-    margin-top: 2rem;
+    text-align: center;
 }
 
 .membership-download__btn {