diff --git a/app/components/banner-slider.php b/app/components/banner-slider.php index 3fb5bb7..0a5deda 100644 --- a/app/components/banner-slider.php +++ b/app/components/banner-slider.php @@ -61,11 +61,6 @@ $total = count($banners); } $style = $styleParts !== [] ? ' style="' . e(implode('; ', $styleParts)) . '"' : ''; ?> -
  • data-banner-slide role="group" aria-roledescription="Folie" aria-label=" von "> -
    - -

    -

    '; }; ?> +
  • data-banner-slide role="group" aria-roledescription="Folie" aria-label=" von "> + +
    + <?= e($banner['company'] ?? $banner['title']) ?> +
    + +
    +

    +

    +
    +
    -
    -
    - <?= e($banner['company'] ?? $banner['title']) ?> +
    • diff --git a/data/banners.json b/data/banners.json index 15bf82c..cf861ac 100644 --- a/data/banners.json +++ b/data/banners.json @@ -20,8 +20,7 @@ "logo_light": true, "accent": "#6cbbbc", "background": "img/banners/breadcrumb-hero-1600.jpg", - "cta": { "label": "Lösungen entdecken", "url": "https://www.breadcrumb-solutions.de/bc/de/loesungen/" }, - "cta_secondary": { "label": "Über uns", "url": "https://www.breadcrumb-solutions.de/bc/de/unternehmen/ueber-uns/" } + "cta": { "label": "Neue Website entdecken", "url": "https://www.breadcrumb-solutions.de/" } } ] } diff --git a/public/assets/css/components.css b/public/assets/css/components.css index cf989b2..c2c7c2f 100644 --- a/public/assets/css/components.css +++ b/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%; } }