Abschluss-CTA: durchgehender Verlauf statt weicher Kreise

Die beiden blur-Kreise ueber dem Hellblau wirkten als Flecken – der dunkle
rechts unten am staerksten. Ersetzt durch .cta-band in shared-styles.css: ein
durchgehender Verlauf ueber die volle Breite, von Anthrazit diagonal in das
Dynamic Blue, beides aus den Theme-Variablen.

- Tiefe kommt aus dem Verlauf, nicht aus ueberlagerten Flaechen.
- Zwei Haarlinien als Kontur: eine oben ueber die Breite, eine als Auftakt
  ueber der Ueberschrift, beide zu den Seiten auslaufend.
- Buttons filigraner: duennerer Rahmen beim Outline-Button, weicherer Schatten
  beim Hauptbutton.

Der Verlauf liegt als CSS-Klasse vor und nicht als Utility-Kette im Blade,
damit er mit den Theme-Variablen arbeitet und ueber alle Themes stimmt.

Tests: 862 gruen (3192 Assertions), Pint sauber, npm run build:b2in gebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-09-03 10:12:20 +00:00
parent f971f416db
commit 3ee7b44a77
5 changed files with 81 additions and 20 deletions

View file

@ -52,6 +52,7 @@ public/img/logos/b2in-interior-logo-negative.png
public/img/logos/b2in-interior-logo-negative.svg
public/img/logos/b2in-interior-logo-positive.png
public/img/logos/b2in-interior-logo-positive.svg
resources/css/web/shared-styles.css
resources/lang/de/b2in.php
resources/lang/de/ui.php
resources/lang/en/b2in.php

View file

@ -19,7 +19,7 @@ eingearbeitet. Offen: Bildmaterial, Rechtstexte und die Herstellerfreigaben.
**Stand 03.09.2026:** T1 und B1–B13 abgearbeitet, **alle Arbeitspakete AP0–AP6 umgesetzt**, die
Bestandsinhalte auf den Interior-Auftritt umgestellt, die Seite abgestimmt und alle vier Punkte
der Abstimmungsrunde vom 03.09. umgesetzt (Nachtrag 5). Alle drei Markenseiten haben jetzt einen
ausführlichen Text. `php artisan test --compact`: **861 grün** (3189 Assertions), Pint sauber,
ausführlichen Text. `php artisan test --compact`: **862 grün** (3192 Assertions), Pint sauber,
`npm run build:b2in` gebaut.
**Die Seite ist testbereit** – die ausstehenden Zulieferungen trägt Marcel selbst im CMS nach.
@ -977,12 +977,22 @@ transportiert. Der Badge am Bild („Visualisierung") trägt die Unterscheidung
Der Block war eine einfarbige Fläche mit Überschrift, Text, Button und einem unterstrichenen
Textlink. Neu:
- Zwei weiche Lichtflächen (`blur-3xl`) nehmen dem Volltonhintergrund die Härte.
- Eine schmale Linie über der Überschrift setzt den Abschluss ab.
- Hauptbutton weiß auf Markenfarbe, mit Pfeil, der beim Hovern mitgeht.
- Die Herstellerseite ist jetzt ein gleichwertiger Outline-Button statt eines Textlinks.
- Der Showroom steht als kleine Zeile mit Pin-Symbol darunter.
**Nachgebessert (zweite Rückmeldung):** Der erste Versuch legte zwei weiche Kreise (`blur-3xl`)
über das Hellblau – die wirkten als sichtbare Flecken, besonders der dunkle rechts unten. Ersetzt
durch einen durchgehenden Verlauf über die volle Breite: `.cta-band` in `shared-styles.css`, von
Anthrazit (`--primary-dark`) diagonal in das Dynamic Blue (`--secondary-dark`). Die Tiefe kommt
aus dem Verlauf selbst, die Kontur aus zwei Haarlinien – eine oben über die Breite, eine als
Auftakt über der Überschrift, beide zu den Seiten auslaufend. Buttons und Fußzeile dabei
zurückhaltender: dünnerer Rahmen, weicherer Schatten.
> Der Verlauf liegt bewusst als CSS-Klasse vor und nicht als Utility-Kette im Blade: er arbeitet
> mit den Theme-Variablen und bleibt so über alle Themes hinweg stimmig.
Die Textinhalte kommen unverändert aus dem CMS (`cta_title` / `cta_text`) – Punkt 4 der Liste war
inhaltlich bereits durch die neuen Texte erledigt („Ihre Küche. Persönlich geplant.").
@ -1025,8 +1035,9 @@ dasselbe Verhalten.
- Jede Vertiefung rendert zugeklappt und mit der Höhen-Animation; die alte Sprung-Bewegung ist
weg.
- Weder Markenseite noch FAQ verwenden noch den Flächen-Hover.
- Der Abschlussblock trägt das Verlaufsband; die weichen Kreise sind weg.
`php artisan test --compact`: **861 grün** (3189 Assertions), Pint sauber, `npm run build:b2in`
`php artisan test --compact`: **862 grün** (3192 Assertions), Pint sauber, `npm run build:b2in`
gebaut.
---