Banner-Slider: einspaltiges Layout, Logo oben links, Foto frei

Logo führt die Slide oben links an (statt großer Logo-Platte rechts); Inhalt
einspaltig, „Anzeige"/Status-Label als Pille unten rechts in der Fußzeile.
Damit gibt die rechte Hälfte das Hintergrundfoto frei — Motivwahl wird viel
einfacher. Logo nur rendern, wenn vorhanden; Wappen (Eigenwerbung) etwas größer.

Breadcrumb-Slide auf einen CTA reduziert: „Neue Website entdecken" → Startseite.

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

@@ -867,6 +867,35 @@
     margin: 0;
 }
 
+/* Gruppierte Abschnitte (fieldset/legend) — gliedert lange Formulare in ruhige
+   Blöcke, getrennt durch eine dezente Hairline. Reduziert die optische Last. */
+.form__group {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-inline-size: 0;
+}
+
+.form__group + .form__group {
+    padding-top: 1.75rem;
+    border-top: 1px solid var(--clr-glass-border);
+}
+
+.form__legend {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 1rem;
+    font-size: var(--fs-500);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--clr-accent);
+}
+
+.form__group-body {
+    display: grid;
+    gap: 1.25rem;
+}
+
 /* === Werbe-/Sponsoren-Banner (Slider) === */
 .ad-banner {
     --banner-interval: 6s;
@@ -896,10 +925,10 @@
 }
 
 .ad-banner__slide {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 2.5rem;
-    align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-height: 320px;
     padding: clamp(1.75rem, 1rem + 2vw, 3rem);
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
@@ -907,6 +936,23 @@
     box-shadow: var(--shadow-card);
 }
 
+/* Inhaltsbreite begrenzen, damit Titel/Text die linke Hälfte belegen und das
+   Foto rechts frei bleibt. */
+.ad-banner__content {
+    max-width: 60ch;
+}
+
+/* Fußzeile: CTAs links, Anzeige-/Status-Label rechts — an den unteren Rand. */
+.ad-banner__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1rem;
+    width: 100%;
+    margin-top: auto;
+    padding-top: 1.5rem;
+}
+
 /* Crossfade-Übergang (nur mit JS): Slides im selben Grid-Feld stapeln, sodass
    die Höhe konstant bleibt (kein Sprung) und ein- wie ausgehende Folie sauber
    überblenden. Die ausgehende driftet leicht nach unten, die eingehende steigt
@@ -975,12 +1021,6 @@
     color: var(--clr-text);
 }
 
-.ad-banner__slide--bg .ad-banner__logo {
-    background: rgb(0 0 0 / 0.4);
-    border-color: rgb(255 255 255 / 0.3);
-    backdrop-filter: blur(2px);
-}
-
 @media (max-width: 768px) {
     /* Auf Mobil läuft der Verlauf nach unten, damit der gestapelte Text lesbar bleibt. */
     .ad-banner__slide--bg {
@@ -1017,11 +1057,6 @@
     color: var(--clr-text);
 }
 
-.ad-banner__slide--house .ad-banner__logo {
-    background: rgb(0 0 0 / 0.25);
-    border-color: rgb(var(--clr-accent-rgb) / 0.45);
-}
-
 /* Eigenwerbung MIT Foto-Hintergrund: rot-dunkler Verlauf von links hält den
    Text lesbar, das Foto bleibt rechts sichtbar. */
 .ad-banner__slide--house.ad-banner__slide--bg {
@@ -1035,12 +1070,6 @@
     border-color: transparent;
 }
 
-.ad-banner__slide--house.ad-banner__slide--bg .ad-banner__logo {
-    background: rgb(0 0 0 / 0.45);
-    border-color: rgb(255 255 255 / 0.18);
-    backdrop-filter: blur(2px);
-}
-
 @media (max-width: 768px) {
     /* Auf Mobil läuft der Verlauf nach unten (Text steht gestapelt darüber). */
     .ad-banner__slide--house.ad-banner__slide--bg {
@@ -1050,16 +1079,18 @@
     }
 }
 
+/* Anzeige-/Status-Label: sitzt rechts in der Fußzeile (margin-left:auto).
+   Dunkle Pille, damit es auch über dem Foto lesbar bleibt. */
 .ad-banner__tag {
-    display: inline-block;
-    margin-bottom: 0.85rem;
+    margin-left: auto;
+    align-self: center;
     padding: 0.2em 0.7em;
     font-size: var(--fs-300);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--clr-text-muted);
-    background: rgb(255 255 255 / 0.08);
-    border: 1px solid var(--clr-glass-border);
+    background: rgb(0 0 0 / 0.45);
+    border: 1px solid rgb(255 255 255 / 0.18);
     border-radius: 999px;
 }
 
@@ -1072,7 +1103,6 @@
 
 .ad-banner__text {
     max-width: 52ch;
-    margin-bottom: 1.5rem;
     color: var(--clr-text-muted);
 }
 
@@ -1083,35 +1113,35 @@
     gap: 0.75rem;
 }
 
+/* Logo führt die Slide an: kompaktes Badge oben links. */
 .ad-banner__logo {
-    display: grid;
-    place-items: center;
-    min-height: 130px;
-    padding: 1.5rem;
-    background: rgb(0 0 0 / 0.18);
-    border: 1px solid var(--clr-glass-border);
-    border-radius: var(--radius-card);
+    margin-bottom: 1.5rem;
 }
 
-/* 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 {
+/* Helle Platte für dunkle Firmenlogos (Wortmarken). */
+.ad-banner__logo--light {
+    padding: 0.55rem 0.85rem;
     background: #fff;
-    border-color: rgb(255 255 255 / 0.55);
-    backdrop-filter: none;
+    border-radius: var(--radius-btn);
 }
 
 .ad-banner__logo img {
+    display: block;
     width: auto;
-    max-width: 100%;
-    max-height: 96px;
+    height: auto;
+    max-width: 230px;
+    max-height: 56px;
     object-fit: contain;
 }
 
+/* Vereinswappen (Eigenwerbung) darf etwas größer stehen. */
+.ad-banner__slide--house .ad-banner__logo img {
+    max-height: 76px;
+}
+
 @media (max-width: 768px) {
-    .ad-banner__slide {
-        grid-template-columns: 1fr;
-        gap: 1.75rem;
+    .ad-banner__content {
+        max-width: 100%;
     }
 }