/* Bad & Sanierung — gezielte visuelle Veredelung der bestehenden
service-hub-premium.css-Komponenten, NUR auf dieser Seite wirksam
(Scope: body.bad-sanierung-polish). Struktur/Reihenfolge/Interaktion
bleiben unverändert — service-hub-premium.css selbst wird nicht
angefasst, da 46 weitere Seiten dieselbe Datei nutzen. */
/* Drei verschiedene Icon-Stile auf einer Seite (Kreis mit Schatten im
Ablauf, nackte Icons bei "Warum wir" und beim Krause-Prinzip) wirkten
uneinheitlich. Jetzt bekommen alle denselben ruhigen Kreis-Look. */
body.bad-sanierung-polish .service-trust-row__list .lucide {
display: grid;
place-items: center;
width: 52px;
height: 52px;
padding: 14px;
border-radius: 50%;
color: #e6007e;
background: #fdf1f7;
box-shadow: 0 8px 20px rgba(230, 0, 126, 0.12);
}
body.bad-sanierung-polish .service-project-split__principles .lucide {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 11px;
margin-bottom: 4px;
border-radius: 50%;
color: #ff5ba8;
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Etwas mehr Tiefe für den Ablauf-Kreis statt nur eines flachen
Schlagschattens. */
body.bad-sanierung-polish .service-flow-band__icon {
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(230, 0, 126, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.bad-sanierung-polish .service-flow-band__steps li:hover .service-flow-band__icon {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(230, 0, 126, 0.32);
}
/* Die Lösungs-Karten hatten keinerlei Hover-Feedback — nur der Pfeil im
Link reagierte. Jetzt hebt sich die ganze Karte leicht an. */
body.bad-sanierung-polish .service-solutions-grid__grid article {
padding: 14px;
border-radius: 18px;
transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
body.bad-sanierung-polish .service-solutions-grid__grid article:hover {
transform: translateY(-6px);
background: #fff;
box-shadow: 0 24px 48px rgba(12, 35, 53, 0.14);
}
body.bad-sanierung-polish .service-solutions-grid__grid figure {
position: relative;
transition: box-shadow 0.22s ease;
}
body.bad-sanierung-polish .service-solutions-grid__grid article:hover figure {
box-shadow: 0 12px 28px rgba(12, 35, 53, 0.18);
}
body.bad-sanierung-polish .service-solutions-grid__grid img {
transition: transform 0.5s ease;
}
body.bad-sanierung-polish .service-solutions-grid__grid article:hover img {
transform: scale(1.05);
}
/* Der Vergleichs-Regler war rein funktional gestaltet — feinerer
Schatten und ein sichtbarerer Rahmen geben ihm mehr Präsenz. */
body.bad-sanierung-polish .service-transform-split__slider {
box-shadow: 0 40px 80px rgba(3, 83, 164, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
body.bad-sanierung-polish .service-transform-split__grip {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.bad-sanierung-polish .service-transform-split__slider:hover .service-transform-split__grip {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
/* Echte Google-Bewertung fehlte ausgerechnet in der Section, die
wörtlich "Warum wir?" fragt — bislang nur Behauptungen, keine Zahl. */
body.bad-sanierung-polish .bsp-rating {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
justify-content: center;
margin: 16px 0 40px;
}
body.bad-sanierung-polish .bsp-rating__stars {
display: flex;
gap: 2px;
}
body.bad-sanierung-polish .bsp-rating__stars .lucide {
width: 16px;
height: 16px;
color: #f5a623;
fill: #f5a623;
padding: 0;
background: none;
box-shadow: none;
}
body.bad-sanierung-polish .bsp-rating strong {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
color: #0c2335;
}
body.bad-sanierung-polish .bsp-rating span {
color: #536876;
font-size: 0.82rem;
}
/* Echtes Kundenzitat (Objektservice — dieselbe Stimme, die auch auf der
Startseite läuft) statt einer erfundenen Bad-spezifischen Bewertung,
die es nicht gibt. Ehrlich mit ihrer echten Kategorie beschriftet. */
body.bad-sanierung-polish .bsp-quote {
max-width: 42ch;
margin: 24px 0 0;
padding: 20px 22px;
border-radius: 14px;
background: #f9fafb;
box-shadow: inset 0 0 0 1px #e7ecef;
}
body.bad-sanierung-polish .bsp-quote p {
margin: 0 0 10px;
color: #0c2335;
font-family: var(--font-display);
font-size: 1rem;
font-style: italic;
font-weight: 700;
line-height: 1.5;
}
body.bad-sanierung-polish .bsp-quote footer {
color: #536876;
font-size: 0.74rem;
font-weight: 700;
}
body.bad-sanierung-polish .bsp-quote footer span {
color: #8898a1;
font-weight: 500;
}
/* Zwei der vier Lösungs-Kacheln zeigten entweder die Bildnaht des
Vergleichsfotos mittig (Komplettbadsanierung) oder ein branchenfremdes
Beratungsraum-Foto statt eines Bads (Barrierefreies Bad). Beide zeigen
jetzt einen bewusst gewählten Ausschnitt aus dem echten Vorher/Nachher-
Foto statt eines Zufallsschnitts oder eines falschen Motivs. */
body.bad-sanierung-polish .bsp-crop-after {
object-position: 82% 40%;
}
body.bad-sanierung-polish .bsp-crop-after-shower {
object-position: 66% 55%;
}
/* Das neue Composite-Motiv besteht aus zwei hochformatigen Hälften.
Im fast quadratischen Hero werden sie unverzerrt beschnitten statt
auf die Rahmenhöhe gestreckt. */
body.bad-sanierung-polish .bsp-hero-media {
aspect-ratio: 1.04;
overflow: visible;
}
body.bad-sanierung-polish .bsp-hero-media > .bsp-hero-slider {
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 26px;
overflow: hidden;
box-shadow: 0 28px 64px rgba(3, 20, 36, 0.24);
}
body.bad-sanierung-polish .bsp-hero-slider {
position: absolute;
inset: 0;
border-radius: 0;
box-shadow: none;
}
body.bad-sanierung-polish .bsp-hero-slider .service-transform-split__after,
body.bad-sanierung-polish .bsp-hero-slider .service-transform-split__before {
background-size: 200% auto;
background-position-y: center;
}
body.bad-sanierung-polish .bsp-hero-slider .service-transform-split__label {
top: 18px;
padding: 7px 13px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(7, 29, 51, 0.78);
box-shadow: 0 8px 20px rgba(3, 20, 36, 0.18);
backdrop-filter: blur(10px);
}
body.bad-sanierung-polish .bsp-hero-slider .service-transform-split__label--before {
left: 18px;
}
body.bad-sanierung-polish .bsp-hero-slider .service-transform-split__label--after {
right: 18px;
}
body.bad-sanierung-polish .bsp-hero-slider .service-transform-split__handle {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
}
@media (max-width: 767.98px) {
body.bad-sanierung-polish .bsp-hero-media {
aspect-ratio: 4 / 3;
}
}
/* Vier Titel-Umbruch-Fehler, alle dieselbe Ursache: ein manuelles
plus ein zu enges max-width (in "ch", also Zeichenbreite), das die
eigentlich schon per
gesetzte Zeile ein zweites Mal umbricht.
Ergebnis: einzelne Wörter wie "Mehr" oder "nach" landen allein auf
ihrer eigenen Zeile. Gemessen und bestätigt per Playwright an vier
Breiten (992–1920px) — kein Einzelfall, sondern derselbe Fehler an
vier Stellen dieser Seite. */
body.bad-sanierung-polish .service-hero-clean--wide .service-hero-clean__copy h1 {
max-width: none;
}
/* Direkt an der Stelle, an der die zweispaltige Hero-Variante einsetzt
(ab 992px), ist die Bild-Spalte mit bis zu 620px so breit, dass der
Text-Spalte nur wenig Platz bleibt. Gemessen (Playwright, Wort-für-
Wort-Zeilenanalyse): zwischen 992–1189px reißt "Ohne den üblichen"
auseinander. 2.2rem reichte für den oberen Teil dieses Bereichs,
aber nicht ganz am unteren Rand (992–1000px) — 2.0rem deckt den
gesamten Bereich zuverlässig ab. Ab 1190px wächst die Text-Spalte
schnell genug und der Fehler verschwindet von selbst. */
@media (min-width: 992px) and (max-width: 1189.98px) {
body.bad-sanierung-polish .service-hero-clean--wide .service-hero-clean__copy h1 {
font-size: 2rem;
}
}
/* Dieselbe Zeilenumbruch-Analyse für sehr schmale Telefone: unterhalb
von 413px reißt "Ein neues Bad." bzw. "Ohne den üblichen" ebenfalls
auseinander (die Mindest-Schriftgröße 2.9rem ist dafür schlicht zu
groß für die verfügbare Breite). Ab 413px greift bereits die normale
Skalierung sauber. */
@media (max-width: 412.98px) {
body.bad-sanierung-polish .service-hero-clean--wide .service-hero-clean__copy h1 {
font-size: 2.2rem;
}
}
body.bad-sanierung-polish .service-transform-split__copy h2 {
max-width: none;
}
body.bad-sanierung-polish .service-final-request__copy h2 {
max-width: none;
}
/* Fünfte, andere Variante: kein
, keine max-width-Ursache (die
540px greifen hier nie, die Spalte selbst ist mit "minmax(300px,.72fr)"
auf 300px begrenzt). Bei 992–1199px ist die Spalte gerade breit genug
für die Schrift, aber zu schmal für 4.2rem, sodass "Fragen" allein
bleibt. Nur in diesem schmalen Bereich betroffen (ab 1200px wächst die
Spalte von selbst, unter 992px greift bereits die mobile 3,15rem-Regel). */
@media (min-width: 992px) and (max-width: 1199.98px) {
body.bad-sanierung-polish .service-master-faq h2 {
font-size: 3.4rem;
}
}
/* Der Vorher/Nachher-Effekt sitzt jetzt schon im Hero direkt darüber —
hier nochmal dieselbe Bild/Text-Reihenfolge und denselben Effekt zu
zeigen, wäre eine reine Wiederholung. Layout gespiegelt (Bild jetzt
links, Text rechts) und der Regler durch einen ruhigen, bereits
fertigen Ausschnitt desselben echten Fotos ersetzt. Nur ab 992px: die
Basiskomponente kollabiert unterhalb von 992px selbst auf eine Spalte
(siehe service-hub-premium.css) — ohne dieses Media-Query hätte die
feste 360px-Mindestbreite der Bild-Spalte diesen mobilen Fallback
überstimmt und auf schmalen Screens einen Extra-Scrollbalken erzeugt. */
@media (min-width: 992px) {
body.bad-sanierung-polish .service-transform-split__grid {
grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
}
}
body.bad-sanierung-polish .bsp-transform-media {
position: relative;
aspect-ratio: 890 / 940;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 30px 60px rgba(3, 83, 164, 0.16);
}
body.bad-sanierung-polish .bsp-transform-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% 48%;
}
body.bad-sanierung-polish .bsp-transform-media figcaption {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(7, 29, 51, 0.85);
color: #fff;
font-size: 0.74rem;
font-weight: 800;
}
/* ============================================================
Hero-Neubau nach Kundenvorlage: 3-spaltige Werte-Zeile, ein
persönlicher Vertrauens-Riegel mit Bewertung, eine schwebende
Statistik-Karte am Bild und eine kompakte 5-spaltige Vertrauens-
Leiste direkt unter dem Hero.
============================================================ */
body.bad-sanierung-polish .bsp-hero-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin: 4px 0 32px;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-hero-values li {
display: flex;
flex-direction: column;
gap: 12px;
padding-left: 20px;
border-left: 1px solid rgba(255, 255, 255, 0.16);
}
body.bad-sanierung-polish .bsp-hero-values li:first-child {
padding-left: 0;
border-left: 0;
}
body.bad-sanierung-polish .bsp-hero-values .lucide {
width: 34px;
height: 34px;
color: #ff5ba8;
}
body.bad-sanierung-polish .bsp-hero-values strong {
display: block;
margin-bottom: 4px;
color: #fff;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 800;
line-height: 1.3;
}
body.bad-sanierung-polish .bsp-hero-values span {
display: block;
color: rgba(255, 255, 255, 0.6);
font-size: 0.76rem;
line-height: 1.5;
}
/* Persönlicher Vertrauens-Riegel unter den CTAs. Der Avatar ist bewusst
ein Platzhalter (gestrichelter Ring, kein Foto) — auf der ganzen Seite
existiert kein echtes Foto eines Krause-Mitarbeiters, nur Stockbilder.
Auf Kundenwunsch so gebaut, echtes Foto wird später eingesetzt: dann
auf .bsp-hero-personal__avatar ein background-image setzen und den
Platzhalter-Rahmen/das Icon entfernen. */
body.bad-sanierung-polish .bsp-hero-personal {
position: relative;
display: flex;
align-items: center;
gap: 18px;
margin-top: 32px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.bad-sanierung-polish .bsp-hero-personal__avatar {
display: grid;
flex-shrink: 0;
place-items: center;
width: 68px;
height: 68px;
border: 1.5px dashed rgba(255, 91, 168, 0.55);
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55);
}
body.bad-sanierung-polish .bsp-hero-personal__avatar .lucide {
width: 28px;
height: 28px;
}
body.bad-sanierung-polish .bsp-hero-personal__note {
position: absolute;
top: -22px;
left: 54px;
transform: rotate(-7deg);
color: #ff5ba8;
font-family: "Caveat", cursive;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.05;
white-space: nowrap;
}
body.bad-sanierung-polish .bsp-hero-personal__note::after {
content: "";
position: absolute;
top: 100%;
left: -12px;
width: 18px;
height: 16px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
border-radius: 0 0 0 12px;
opacity: 0.7;
}
body.bad-sanierung-polish .bsp-hero-personal__body strong {
display: block;
color: #fff;
font-family: var(--font-display);
font-size: 0.96rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-hero-personal__body > span {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.78rem;
}
body.bad-sanierung-polish .bsp-hero-personal__rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.78rem;
}
body.bad-sanierung-polish .bsp-hero-personal__stars {
display: flex;
gap: 1px;
}
body.bad-sanierung-polish .bsp-hero-personal__stars .lucide {
width: 16px;
height: 16px;
color: #f5a623;
fill: #f5a623;
}
body.bad-sanierung-polish .bsp-hero-personal__rating b {
color: #fff;
font-weight: 800;
}
/* Schwebende Statistik-Karte, die unten aus dem Vergleichsbild
herausragt (analog zur Kundenvorlage). Ab 992px absolut über dem
Bildrand, darunter statisch und einspaltig, damit auf schmalen
Bildschirmen nichts überlappt. */
body.bad-sanierung-polish .bsp-hero-stats-card {
position: absolute;
right: 20px;
bottom: -32px;
left: 20px;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 20px 24px;
border-radius: 16px;
background: #fff;
box-shadow: 0 24px 48px rgba(3, 20, 36, 0.22);
}
body.bad-sanierung-polish .bsp-hero-stats-card > div {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
border-left: 1px solid #e7ecef;
}
body.bad-sanierung-polish .bsp-hero-stats-card > div:first-child {
padding-left: 0;
border-left: 0;
}
body.bad-sanierung-polish .bsp-hero-stats-card .lucide {
flex-shrink: 0;
width: 28px;
height: 28px;
color: #0c2335;
}
body.bad-sanierung-polish .bsp-hero-stats-card strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 800;
line-height: 1.3;
}
body.bad-sanierung-polish .bsp-hero-stats-card span {
display: block;
margin-top: 2px;
color: #536876;
font-size: 0.7rem;
line-height: 1.4;
}
@media (max-width: 991.98px) {
body.bad-sanierung-polish .bsp-hero-stats-card {
position: static;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 20px;
}
body.bad-sanierung-polish .bsp-hero-stats-card > div {
padding: 14px 0 0;
border-top: 1px solid #e7ecef;
border-left: 0;
}
body.bad-sanierung-polish .bsp-hero-stats-card > div:first-child {
padding-top: 0;
border-top: 0;
}
}
@media (max-width: 767.98px) {
body.bad-sanierung-polish .bsp-hero-values {
grid-template-columns: 1fr;
gap: 16px;
}
body.bad-sanierung-polish .bsp-hero-values li {
flex-direction: row;
align-items: flex-start;
gap: 14px;
padding-top: 14px;
padding-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-left: 0;
}
body.bad-sanierung-polish .bsp-hero-values li:first-child {
padding-top: 0;
border-top: 0;
}
body.bad-sanierung-polish .bsp-hero-values .lucide {
flex-shrink: 0;
margin-top: 2px;
}
}
@media (max-width: 480px) {
body.bad-sanierung-polish .bsp-hero-personal {
flex-wrap: wrap;
}
body.bad-sanierung-polish .bsp-hero-personal__note {
display: none;
}
}
/* Kompakte 5-spaltige Vertrauens-Leiste direkt unter dem Hero, in
derselben Bild-Sprache wie die tiefere "Warum wir?"-Section
(.service-trust-row__list) weiter unten auf der Seite — hier bewusst
kurz und ohne Fließtext, als schneller Blickfang direkt nach dem
Hero, bevor die ausführlichere Section später im Detail überzeugt. */
body.bad-sanierung-polish .bsp-quick-trust {
padding: 30px 0;
background: #f4f7fa;
border-bottom: 1px solid #e7ecef;
}
body.bad-sanierung-polish .bsp-quick-trust ul {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-quick-trust li {
display: flex;
align-items: center;
gap: 16px;
}
body.bad-sanierung-polish .bsp-quick-trust .lucide {
display: grid;
flex-shrink: 0;
place-items: center;
width: 60px;
height: 60px;
padding: 12px;
border-radius: 50%;
color: #e6007e;
background: #fdf1f7;
box-shadow: 0 8px 18px rgba(230, 0, 126, 0.1);
}
/* Das Google-Logo ist selbst schon vierfarbig und trägt seine eigene
Bildmarke — in denselben rosa Kreis wie die einfarbigen Icons gezwängt,
wirkte es gequetscht und passte farblich nicht zu den anderen. Jetzt
steht es frei und größer, wie eine eigenständige Marke, nicht wie ein
weiteres Symbol in Hausfarbe. */
body.bad-sanierung-polish .bsp-quick-trust__google {
display: grid;
flex-shrink: 0;
place-items: center;
width: 60px;
height: 60px;
}
body.bad-sanierung-polish .bsp-quick-trust__google svg {
width: 38px;
height: 38px;
}
body.bad-sanierung-polish .bsp-quick-trust strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.02em;
text-transform: uppercase;
}
body.bad-sanierung-polish .bsp-quick-trust span {
display: block;
margin-top: 4px;
color: #536876;
font-size: 0.78rem;
line-height: 1.4;
}
@media (max-width: 1199.98px) {
body.bad-sanierung-polish .bsp-quick-trust ul {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 24px;
}
}
@media (max-width: 767.98px) {
body.bad-sanierung-polish .bsp-quick-trust ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
body.bad-sanierung-polish .bsp-quick-trust ul {
grid-template-columns: 1fr;
}
}
/* ============================================================
Ersetzt zwei frühere Sections ("Wenn aus Alt neu wird" mit dem
Vorher/Nachher-Regler, und die Badlösungen-Kachelübersicht) durch
eine einzige neue Section nach Kundenvorlage: Beratungsfoto mit
Ansprechpartner-Karte links, Prozess in 3 Schritten rechts, darunter
eine eigene kompakte Vertrauens-Leiste.
Bildhinweis: Die Vorlage zeigt ein Beratungsgespräch mit Bad-
Grundrissen an einem Tisch in einem fertigen Badezimmer — dieses
exakte Motiv existiert nicht im Bildbestand. Ein erster Versuch mit
einem echten Beratungsfoto (Technikraum-Setting) wirkte neben der
warmen Vorlage kalt und unpassend. Verwendet wird stattdessen ein
Ausschnitt des echten Vorher/Nachher-Bads — kein Beratungsgespräch,
aber stimmungsmäßig näher an der Vorlage. Bleibt ein Platzhalter,
bis ein echtes Bad-Beratungsfoto vorliegt.
Personen-Karte: Wie beim Hero kein erfundenes Foto/Name (siehe
.bsp-hero-personal) — Platzhalter-Avatar, Rolle statt Name. */
/* Hintergrund hell-grau statt weiß: in der Vorlage steht die ganze
Section (Foto+Text UND die Vertrauens-Leiste darunter) auf einem
leichten Grauton, während die Leiste selbst als weiße, freistehende
Karte darauf schwebt — nicht als flaches, kantenbündiges Band. */
body.bad-sanierung-polish .bsp-plan-split {
position: relative;
padding: clamp(82px, 8vw, 118px) 0 64px;
overflow: hidden;
background:
radial-gradient(circle at 12% 24%, rgba(0, 122, 204, 0.085), transparent 31%),
radial-gradient(circle at 88% 72%, rgba(25, 105, 160, 0.045), transparent 30%),
linear-gradient(135deg, #edf4f8 0%, #f8fafc 48%, #f1f6f9 100%);
}
body.bad-sanierung-polish .bsp-plan-split::before {
content: "";
position: absolute;
top: 9%;
right: -8%;
width: min(38vw, 560px);
aspect-ratio: 1;
border: 1px solid rgba(12, 35, 53, 0.055);
border-radius: 50%;
box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.16), 0 0 0 84px rgba(255, 255, 255, 0.1);
pointer-events: none;
}
/* align-items:start statt center: das Foto (4:5, sehr hochformatig)
ist deutlich höher als der Textblock. Mit "center" entstand oben UND
unten je ~135px toter Leerraum um die Copy-Spalte — in der Vorlage
beginnt der Text dagegen oben auf Höhe des Fotos. */
body.bad-sanierung-polish .bsp-plan-split__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.14fr) minmax(420px, 0.86fr);
gap: 0;
align-items: start;
}
/* War hochformatig (4:5) für das echte Vorher/Nachher-Foto gedacht,
das dort mangels eines passenden Beratungsfotos platzhalterhaft
eingesetzt war. Die Kundenvorlage zeigt für dieses Motiv (Beratung
am Tisch) ein deutlich breiteres, fast quadratisches Format — jetzt
stattdessen ein ehrlicher Platzhalter in genau diesem Format, bis
ein echtes Beratungsfoto vorliegt. */
body.bad-sanierung-polish .bsp-plan-split__media {
position: relative;
z-index: 1;
margin: 120px 0 0;
aspect-ratio: 1.08;
overflow: visible;
}
body.bad-sanierung-polish .bsp-plan-split__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 59% center;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 28px;
box-shadow: 0 32px 72px rgba(12, 35, 53, 0.18);
}
body.bad-sanierung-polish .bsp-plan-split__media--placeholder {
border: 1.5px dashed rgba(12, 35, 53, 0.18);
background: #eef1f4;
box-shadow: none;
}
body.bad-sanierung-polish .bsp-plan-split__photo-label {
position: absolute;
top: 16px;
left: 16px;
z-index: 1;
padding: 6px 12px;
border-radius: 999px;
background: rgba(12, 35, 53, 0.35);
color: #fff;
font-family: var(--font-display);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.bad-sanierung-polish .bsp-plan-split__placeholder-fill {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: rgba(12, 35, 53, 0.28);
}
body.bad-sanierung-polish .bsp-plan-split__placeholder-fill .lucide {
width: 15%;
height: 15%;
min-width: 32px;
min-height: 32px;
}
/* Dritter, für diese große Section eigener Ausschnitt desselben echten
Vorher/Nachher-Fotos (siehe .bsp-crop-after / .bsp-crop-after-shower
für die anderen beiden) — zeigt die helle Dusche mit Fenster statt
der bisherigen Technikraum-Aufnahme, die neben dem warmen
Referenzbild kalt und unpassend wirkte. */
body.bad-sanierung-polish .bsp-crop-plan {
object-position: 94% 35%;
}
/* Große, blasse Kapitel-Ziffer — sitzt jetzt als eigenes Element auf
Höhe der ganzen Section (nicht mehr im Bild verschachtelt: vorher
lag sie im , wodurch sie mit dem Foto quasi deckungsgleich
startete und unschön mitten ins Bild hineinragte, statt wie in der
Vorlage in der Seiten-Marge links davon zu stehen). */
body.bad-sanierung-polish .bsp-plan-split__index {
display: none;
}
body.bad-sanierung-polish .bsp-plan-split__card {
position: absolute;
right: auto;
bottom: -22px;
left: clamp(22px, 3vw, 38px);
width: min(66%, 390px);
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 17px;
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 16px;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 18px 42px rgba(12, 35, 53, 0.17);
backdrop-filter: blur(14px);
}
body.bad-sanierung-polish .bsp-plan-split__avatar {
display: grid;
flex-shrink: 0;
place-items: center;
width: 50px;
height: 50px;
border: 1px solid rgba(0, 112, 184, 0.16);
border-radius: 50%;
background: #edf6fb;
color: #0877bd;
box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.72);
}
body.bad-sanierung-polish .bsp-plan-split__copy {
position: relative;
z-index: 2;
margin: 60px 0 0 -42px;
padding: clamp(34px, 3.6vw, 46px);
border: 1px solid rgba(19, 93, 139, 0.1);
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
box-shadow:
0 30px 72px rgba(12, 35, 53, 0.11),
0 2px 8px rgba(12, 35, 53, 0.035);
backdrop-filter: blur(18px);
}
body.bad-sanierung-polish .bsp-plan-split__copy::before {
content: none;
}
body.bad-sanierung-polish .bsp-plan-split__avatar .lucide {
width: 24px;
height: 24px;
}
body.bad-sanierung-polish .bsp-plan-split__card strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.86rem;
font-weight: 800;
line-height: 1.3;
}
body.bad-sanierung-polish .bsp-plan-split__card > div > span {
display: block;
margin-top: 3px;
color: #e6007e;
font-size: 0.74rem;
font-weight: 700;
}
body.bad-sanierung-polish .bsp-plan-split__copy .service-hero-clean__kicker {
color: #e6007e;
}
/* max 2.5rem statt 3rem: die Copy-Spalte wächst wegen der festen
Bild-Spaltenbreite (max. 560px) ab ~1300px Viewport nicht mehr mit,
während die Schrift über vw weiter zugelegt hätte — "Plan." wäre ab
1300px bis 1920px+ als Einzelwort auf einer eigenen Zeile gelandet
(Playwright-Zeilenanalyse). Mit 2.5rem als Obergrenze bleibt
"Wir machen daraus einen Plan." auf einer Zeile. */
body.bad-sanierung-polish .bsp-plan-split__copy h2 {
margin: 16px 0 20px;
color: #0c2335;
font-family: var(--font-display);
font-size: clamp(2.2rem, 2.8vw, 2.5rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.035em;
}
body.bad-sanierung-polish .bsp-plan-split__copy > p {
max-width: 52ch;
margin: 0 0 30px;
color: #536876;
font-size: 1.05rem;
line-height: 1.72;
}
/* Vorher wirkten die 3 Schritte neben dem hohen 4:5-Foto (842px) klein
und verloren — die Copy-Spalte endete rund 235px vor dem unteren
Bildrand, sichtbarer Leerraum. Größere Kreise, größere Schrift und
mehr Abstand zwischen den Schritten füllen die Spalte spürbar besser
und wirken auf Desktop neben dem großen Foto harmonischer. */
body.bad-sanierung-polish .bsp-plan-split__steps {
position: relative;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-plan-split__steps li {
position: relative;
display: flex;
gap: 20px;
padding-bottom: 20px;
}
body.bad-sanierung-polish .bsp-plan-split__steps li:last-child {
padding-bottom: 0;
}
/* Verbindungslinie zwischen den Nummern-Kreisen — ein einzelnes
Pseudo-Element pro Zeile, das bis zum Kreis der nächsten Zeile
herunterreicht; beim letzten Schritt entfällt es. */
body.bad-sanierung-polish .bsp-plan-split__steps li:not(:last-child)::before {
content: "";
position: absolute;
top: 54px;
bottom: 0;
left: 25px;
width: 1px;
background: rgba(8, 119, 189, 0.16);
}
body.bad-sanierung-polish .bsp-plan-split__steps li > span {
position: relative;
z-index: 1;
display: grid;
flex-shrink: 0;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid rgba(8, 119, 189, 0.1);
background: #edf6fb;
color: #0877bd;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-plan-split__steps h3,
body.bad-sanierung-polish .bsp-plan-split__steps strong {
display: block;
margin: 2px 0 8px;
color: #0c2335;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-plan-split__steps p {
margin: 0;
max-width: 40ch;
color: #536876;
font-size: 0.98rem;
line-height: 1.55;
}
body.bad-sanierung-polish .bsp-plan-split__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 3px;
border-bottom: 1px solid rgba(230, 0, 126, 0.3);
color: #e6007e;
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 800;
text-decoration: none;
transition: gap 0.2s ease, border-color 0.2s ease;
}
body.bad-sanierung-polish .bsp-plan-split__link:hover {
gap: 12px;
border-color: rgba(230, 0, 126, 0.6);
}
body.bad-sanierung-polish .bsp-plan-split__link .lucide {
width: 16px;
height: 16px;
}
@media (max-width: 991.98px) {
body.bad-sanierung-polish .bsp-plan-split__grid {
grid-template-columns: 1fr;
}
body.bad-sanierung-polish .bsp-plan-split__media {
margin-top: 0;
aspect-ratio: 16 / 10;
}
body.bad-sanierung-polish .bsp-plan-split__copy {
margin: 68px 0 0;
}
}
@media (max-width: 575.98px) {
body.bad-sanierung-polish .bsp-plan-split {
padding-top: 72px;
}
body.bad-sanierung-polish .bsp-plan-split__media {
aspect-ratio: 4 / 3;
}
body.bad-sanierung-polish .bsp-plan-split__media img {
border-radius: 22px;
}
body.bad-sanierung-polish .bsp-plan-split__card {
right: 14px;
bottom: -34px;
left: 14px;
width: auto;
padding: 14px;
}
body.bad-sanierung-polish .bsp-plan-split__avatar {
width: 48px;
height: 48px;
}
body.bad-sanierung-polish .bsp-plan-split__copy {
margin-top: 78px;
padding: 30px 24px;
border-radius: 22px;
}
}
/* Nur bei den schmalsten Geräten (~320px, z. B. altes iPhone SE) reißt
"Wir machen daraus einen Plan." noch einmal auseinander ("Plan."
allein). Ab 330px reicht die reguläre Mindestgröße bereits aus. */
@media (max-width: 329.98px) {
body.bad-sanierung-polish .bsp-plan-split__copy h2 {
font-size: 2rem;
}
}
/* .bsp-plan-trust: die "Warum wir?"-Section, die damals für die
Überlappung sorgte, ist inzwischen komplett von der Seite entfernt
— die Leiste kann jetzt ohne Redundanz zurück, wie in der
Kundenvorlage gezeigt: eine weiße, freistehende Karte mit 4 Spalten
direkt unter dem Foto/Text-Bereich. */
body.bad-sanierung-polish .bsp-plan-trust {
position: relative;
z-index: 1;
margin-top: 48px;
padding: 36px 40px;
border-radius: 22px;
background: #fff;
box-shadow: 0 24px 56px rgba(12, 35, 53, 0.1);
}
body.bad-sanierung-polish .bsp-plan-trust ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-plan-trust li {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 28px;
border-left: 1px solid rgba(12, 35, 53, 0.08);
}
body.bad-sanierung-polish .bsp-plan-trust li:first-child {
padding-left: 0;
border-left: 0;
}
body.bad-sanierung-polish .bsp-plan-trust .lucide {
width: 26px;
height: 26px;
color: #0877bd;
}
body.bad-sanierung-polish .bsp-plan-trust strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.94rem;
font-weight: 800;
line-height: 1.3;
}
body.bad-sanierung-polish .bsp-plan-trust span {
display: block;
margin-top: 4px;
color: #536876;
font-size: 0.8rem;
line-height: 1.5;
}
@media (max-width: 1199.98px) {
body.bad-sanierung-polish .bsp-plan-trust ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 26px;
}
body.bad-sanierung-polish .bsp-plan-trust li:nth-child(2n+1) {
padding-left: 0;
border-left: 0;
}
}
@media (max-width: 575.98px) {
body.bad-sanierung-polish .bsp-plan-trust {
padding: 28px 24px;
}
body.bad-sanierung-polish .bsp-plan-trust ul {
grid-template-columns: 1fr;
row-gap: 20px;
}
body.bad-sanierung-polish .bsp-plan-trust li {
padding: 16px 0 0;
border-top: 1px solid rgba(12, 35, 53, 0.08);
border-left: 0;
}
body.bad-sanierung-polish .bsp-plan-trust li:first-child {
padding-top: 0;
border-top: 0;
}
}
/* ============================================================
Badprojekt-Showcase, zweiter Anlauf: echter Swiper (Swiper.js, auf
dieser Seite bereits als Bibliothek geladen) statt einer statischen
Vergleichs-Fläche — der Pfeil rechts ist ein funktionierender
"Nächstes Projekt"-Button, kein Dekor. Mit aktuell nur einem echten
Fall deaktiviert Swiper den Button automatisch (Standardverhalten
bei genau einer Folie); sobald ein zweiter echter Fall dazukommt,
funktioniert die Navigation ohne weitere Änderungen.
Bild-Einschränkung, ehrlich gehalten: Das "Nachher"-Foto in der
Vorlage ist extrem breit (Querformat). Unser einziges echtes
Vorher/Nachher-Foto ist EIN zusammengesetztes Bild (beide Hälften
nebeneinander in einer Datei). Rechnerisch sind bei einem Seiten-
verhältnis über ~0.89 mehr als 50% der Bildbreite sichtbar — jede
reine Zuschnitt-Technik würde dann zwangsläufig einen Streifen der
Vorher-Hälfte mit zeigen. Gewählt wurde stattdessen ein moderates
Querformat (5:4) mit derselben Technik wie beim bestehenden Vorher/
Nachher-Regler (background-size:200% + Positionierung auf die
rechte Hälfte) — dabei wird das Bild leicht vertikal gestaucht,
was bei einem gefliesten Bad kaum auffällt, aber ehrlicher ist als
ein Bildausschnitt, der versehentlich das alte Bad mit zeigt. */
body.bad-sanierung-polish .bsp-badprojekt {
position: relative;
padding: clamp(76px, 8vw, 116px) 0;
overflow: hidden;
background:
radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 48%),
linear-gradient(180deg, #f8fafc 0%, #fff 58%, #f7fafc 100%);
}
body.bad-sanierung-polish .bsp-badprojekt__head {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto clamp(42px, 5vw, 58px);
text-align: center;
}
body.bad-sanierung-polish .bsp-badprojekt__head .service-hero-clean__kicker {
color: #e6007e;
}
body.bad-sanierung-polish .bsp-badprojekt__head h2 {
margin: 16px 0 18px;
color: #0c2335;
font-family: var(--font-display);
font-size: clamp(2.2rem, 3.8vw, 3.25rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.035em;
}
body.bad-sanierung-polish .bsp-badprojekt__head p {
margin: 0 auto;
color: #536876;
font-size: 1rem;
max-width: 650px;
line-height: 1.65;
}
@media (max-width: 379.98px) {
body.bad-sanierung-polish .bsp-badprojekt__head h2 {
font-size: 1.7rem;
}
}
body.bad-sanierung-polish .bsp-badprojekt__showcase {
position: relative;
margin-bottom: 32px;
}
/* overflow:hidden bleibt zwingend Swipers Standard — er blendet damit
die inaktiven Folien seitlich aus. Ein früherer overflow:visible
hier (wegen des Pfeils) hat genau das kaputt gemacht: alle 3 Folien
waren gleichzeitig sichtbar, mit Overflow auf der ganzen Seite. */
/* Oben bündig, nicht unten: das kleinere Vorher-Bild hat in der
Vorlage Luft UNTEN (dort sitzt der Pfeil) — nicht oben. Mit
align-items:flex-end saß vorher alles an der falschen Stelle. */
body.bad-sanierung-polish .bsp-badprojekt__compare {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
gap: clamp(20px, 2.25vw, 30px);
}
/* Wrapper um Vorher-Bild + Pfeil: der Pfeil hängt jetzt an DIESEM
Element (top:100%, also exakt an der Unterkante des Vorher-Bilds),
nicht mehr an der Unterkante des ganzen (durch das viel höhere
Nachher-Bild bestimmten) Vergleichsblocks. */
body.bad-sanierung-polish .bsp-badprojekt__before-wrap {
position: relative;
flex: 0 0 auto;
width: clamp(170px, 21vw, 240px);
}
body.bad-sanierung-polish .bsp-badprojekt__after {
position: relative;
margin: 0;
overflow: hidden;
}
/* Seitenverhältnis korrigiert: in der Vorlage ist das Vorher-Bild
leicht querformatig (breiter als hoch), nicht hochformatig wie in
meinem ersten Versuch. 6:7 bleibt knapp unter der Grenze, ab der
ein Zuschnitt zwangsläufig auch einen Streifen der Nachher-Hälfte
des Quellfotos zeigen würde (siehe Notiz oben am Sectionanfang). */
body.bad-sanierung-polish .bsp-badprojekt__before {
position: relative;
margin: 0;
overflow: hidden;
width: 100%;
aspect-ratio: 6 / 7;
border: 1px solid rgba(12, 35, 53, 0.08);
border-radius: 18px;
box-shadow: 0 14px 32px rgba(12, 35, 53, 0.11);
}
body.bad-sanierung-polish .bsp-badprojekt__before img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.bad-sanierung-polish .bsp-crop-project-before {
object-position: 8% 45%;
}
/* Eigenständiges Foto (nicht Teil des Vorher/Nachher-Composite-Bilds),
eigener Ausschnitt: hält Waschbecken und Spiegel im Bild, statt den
für das andere Foto passenden Ausschnitt hier falsch anzuwenden. */
body.bad-sanierung-polish .bsp-crop-wanne-dusche-vorher {
object-position: 68% 55%;
}
/* Deutlich breiteres Querformat, näher an der Vorlage (dort ca.
2,3:1) — die background-size:200%-Technik (siehe .after-img) hat
hier keine Bleed-Grenze wie ein normaler Bild-Zuschnitt, sondern
staucht das Bild bei einem so breiten Verhältnis stattdessen leicht
vertikal. Bei einem überwiegend gefliesten Bad kaum wahrnehmbar. */
body.bad-sanierung-polish .bsp-badprojekt__after {
flex: 0 1 760px;
aspect-ratio: 2 / 1;
border: 1px solid rgba(12, 35, 53, 0.08);
border-radius: 22px;
box-shadow: 0 18px 46px rgba(12, 35, 53, 0.12);
}
body.bad-sanierung-polish .bsp-badprojekt__after-img {
width: 100%;
height: 100%;
background-image: url("../img/b4/3.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
body.bad-sanierung-polish .bsp-badprojekt__after > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.bad-sanierung-polish .bsp-badprojekt__label {
position: absolute;
top: 14px;
left: 14px;
z-index: 1;
padding: 6px 12px;
border-radius: 999px;
color: #fff;
font-family: var(--font-display);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 6px 16px rgba(12, 35, 53, 0.16);
backdrop-filter: blur(8px);
}
body.bad-sanierung-polish .bsp-badprojekt__label--before {
background: rgba(7, 29, 51, 0.75);
}
body.bad-sanierung-polish .bsp-badprojekt__label--after {
background: #e6007e;
}
/* Hängt jetzt an .before-wrap (top:100% = exakt Unterkante des
Vorher-Bilds), nicht mehr an der Unterkante des ganzen, viel
höheren Vergleichsblocks. */
body.bad-sanierung-polish .bsp-badprojekt__arrow {
position: absolute;
top: 100%;
left: 55%;
z-index: 2;
width: 64px;
height: 44px;
color: #e6007e;
}
/* Runder "Nächstes Projekt"-Button rechts, wie in der Vorlage — echter
Swiper-Navigations-Button, kein Bild-Dekor. */
body.bad-sanierung-polish .bsp-badprojekt-swiper__next {
position: absolute;
top: 50%;
right: -22px;
z-index: 3;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: 0;
border-radius: 50%;
background: #0c2335;
color: #fff;
box-shadow: 0 12px 28px rgba(3, 20, 36, 0.22);
cursor: pointer;
transform: translateY(-50%);
transition: transform 0.2s ease, background 0.2s ease;
}
body.bad-sanierung-polish .bsp-badprojekt-swiper__next .lucide {
width: 22px;
height: 22px;
}
body.bad-sanierung-polish .bsp-badprojekt-swiper__next:hover {
background: #e6007e;
transform: translateY(-50%) scale(1.06);
}
/* Wie in der Referenz bleibt die Projektbeschreibung frei unter den
Bildern. Die Kennzahlenkarte folgt darunter und spannt über die
komplette Showcase-Breite. */
body.bad-sanierung-polish .bsp-badprojekt__info {
display: flex;
flex-direction: column;
gap: 24px;
}
body.bad-sanierung-polish .bsp-badprojekt__meta {
position: relative;
max-width: 420px;
}
body.bad-sanierung-polish .bsp-badprojekt__tag {
display: block;
margin-bottom: 10px;
color: #e6007e;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.bad-sanierung-polish .bsp-badprojekt__meta h3 {
position: relative;
display: inline-block;
margin: 0;
padding-bottom: 14px;
color: #0c2335;
font-family: var(--font-display);
font-size: clamp(1.45rem, 2.1vw, 1.8rem);
font-weight: 800;
line-height: 1.22;
letter-spacing: -0.02em;
}
body.bad-sanierung-polish .bsp-badprojekt__meta h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 3px;
border-radius: 2px;
background: #e6007e;
}
/* Vorher: 4 Kacheln in sehr unterschiedlicher Breite (kurzer Text wie
"8 m²" ließ viel Luft, "Was gemacht wurde" füllte seine Spalte fast
ganz aus) und der Button hing isoliert rechts ohne Bezug zum Rest —
wirkte unruhig, obwohl die Grid-Spalten technisch schon gleich breit
waren. Trennlinien zwischen allen 5 Elementen (4 Kacheln + Button)
machen die eigentlich gleichmäßige Struktur jetzt auch sichtbar. */
body.bad-sanierung-polish .bsp-badprojekt__card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
padding: 22px 26px;
border: 1px solid rgba(12, 35, 53, 0.07);
border-radius: 20px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 38px rgba(12, 35, 53, 0.08);
backdrop-filter: blur(10px);
}
/* auto-fit statt einer festen 4er-Spaltenzahl: passt sich automatisch
an, egal ob eine Folie 3 oder 4 Kennzahlen hat, ohne dass einzelne
Kacheln zu breit mit viel Leerraum wirken. Da die Karte über die
gesamte Showcase-Breite läuft, können auch längere Texte ganz normal
als Kachel
mit umbrechendem Text funktionieren, ohne eigene Sonderbehandlung. */
body.bad-sanierung-polish .bsp-badprojekt__card ul {
display: grid;
grid-template-columns: minmax(110px, 0.8fr) minmax(170px, 1.2fr) minmax(125px, 0.9fr) minmax(230px, 1.7fr);
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-badprojekt__card li {
display: flex;
align-items: flex-start;
gap: 11px;
min-width: 0;
padding: 2px 20px;
border-left: 1px solid rgba(12, 35, 53, 0.1);
}
body.bad-sanierung-polish .bsp-badprojekt__card li:first-child {
padding-left: 0;
border-left: 0;
}
body.bad-sanierung-polish .bsp-badprojekt__card .lucide {
flex-shrink: 0;
width: 25px;
height: 25px;
margin-top: 2px;
color: #e6007e;
}
body.bad-sanierung-polish .bsp-badprojekt__card strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 800;
line-height: 1.3;
}
body.bad-sanierung-polish .bsp-badprojekt__card li span {
display: block;
margin-top: 3px;
color: #536876;
font-size: 0.74rem;
line-height: 1.4;
}
body.bad-sanierung-polish .bsp-badprojekt__card .action-primary {
flex-shrink: 0;
margin: 0;
white-space: nowrap;
}
@media (max-width: 991.98px) {
body.bad-sanierung-polish .bsp-badprojekt__card ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 22px;
}
/* Bei 2 Spalten wäre die Trennlinie vor der 3. Kachel (erste der
zweiten Zeile) irreführend — sieht aus, als ginge etwas von "oben
links" weiter, das es nicht gibt. */
body.bad-sanierung-polish .bsp-badprojekt__card li:nth-child(2n+1) {
padding-left: 0;
border-left: 0;
}
/* Der Button saß bislang als Flex-Nachbar neben der Liste und wurde
über die volle Zeilenhöhe vertikal zentriert — seit die "Was
gemacht wurde"-Zeile die Liste deutlich höher machen kann, landete
der Button dadurch mitten in den Chips statt daneben. Ab hier
wandert er stattdessen als eigene, volle Zeile darunter. */
body.bad-sanierung-polish .bsp-badprojekt__card {
grid-template-columns: 1fr;
align-items: stretch;
}
body.bad-sanierung-polish .bsp-badprojekt__card .action-primary {
width: 100%;
margin: 0;
padding-left: var(--button-pad);
border-left: 0;
justify-content: center;
}
}
@media (max-width: 767.98px) {
body.bad-sanierung-polish .bsp-badprojekt__compare {
flex-direction: column;
align-items: stretch;
}
body.bad-sanierung-polish .bsp-badprojekt__before-wrap {
width: 55%;
}
body.bad-sanierung-polish .bsp-badprojekt__after {
flex-basis: auto;
width: 100%;
max-width: none;
}
body.bad-sanierung-polish .bsp-badprojekt__arrow {
display: none;
}
body.bad-sanierung-polish .bsp-badprojekt-swiper__next {
right: 8px;
}
body.bad-sanierung-polish .bsp-badprojekt__card {
padding: 26px 24px;
}
}
@media (max-width: 480px) {
body.bad-sanierung-polish .bsp-badprojekt__card ul {
grid-template-columns: 1fr;
row-gap: 18px;
}
/* Einspaltig: Trennlinien wandern von links (zwischen Spalten) nach
oben (zwischen gestapelten Zeilen). */
body.bad-sanierung-polish .bsp-badprojekt__card li {
padding: 16px 0 0;
border-top: 1px solid rgba(12, 35, 53, 0.1);
border-left: 0;
}
body.bad-sanierung-polish .bsp-badprojekt__card li:first-child {
padding-top: 0;
border-top: 0;
}
body.bad-sanierung-polish .bsp-badprojekt__card .action-primary {
width: 100%;
margin: 20px 0 0;
padding-left: var(--button-pad);
border-left: 0;
justify-content: center;
}
}
/* Vertrauens-Leiste unter dem Badprojekt — Icons hier dunkel/marineblau
statt pink und ohne Kreis-Badge, genau wie in dieser Vorlage (anders
als die pink getönten Kreis-Icons bei .bsp-quick-trust im Hero).
"Über 10 Jahre Erfahrung" aus der Vorlage durch "Jahrelange
Erfahrung" ersetzt — dieselbe Begründung wie beim Hero: die Zahl ist
nirgends auf der Seite belegt. */
body.bad-sanierung-polish .bsp-badprojekt-trust {
padding: 34px 0;
background: #f4f7fa;
}
body.bad-sanierung-polish .bsp-badprojekt-trust ul {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-badprojekt-trust li {
display: flex;
align-items: flex-start;
gap: 14px;
}
body.bad-sanierung-polish .bsp-badprojekt-trust .lucide {
flex-shrink: 0;
width: 26px;
height: 26px;
margin-top: 2px;
color: #0c2335;
}
body.bad-sanierung-polish .bsp-badprojekt-trust strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-badprojekt-trust span {
display: block;
margin-top: 3px;
color: #536876;
font-size: 0.76rem;
line-height: 1.4;
}
@media (max-width: 1199.98px) {
body.bad-sanierung-polish .bsp-badprojekt-trust ul {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 22px;
}
}
@media (max-width: 767.98px) {
body.bad-sanierung-polish .bsp-badprojekt-trust ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
body.bad-sanierung-polish .bsp-badprojekt-trust ul {
grid-template-columns: 1fr;
}
}
/* Verkleinerung des Abstands zu "Unser Ablauf" wieder zurückgenommen
— der luftigere Übergang (mehr Weißraum) kam besser an als die
engere Version. */
/* ============================================================
Echter Mehr-Folien-Swiper: 1 echtes Projekt + 2 klar erkennbare
Platzhalter-Folien (gestrichelter Rahmen, Icon statt Foto, Hinweis
"folgt in Kürze", keine erfundenen Kennzahlen) — auf Kundenwunsch
so gebaut, echte Fotos/Projektdaten werden später ergänzt. Damit
navigiert der Pfeil rechts jetzt wirklich zu etwas, auch wenn zwei
der drei Folien noch Platzhalter sind. */
body.bad-sanierung-polish .bsp-badprojekt-swiper__prev {
position: absolute;
top: 50%;
left: -22px;
z-index: 3;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: 0;
border-radius: 50%;
background: #0c2335;
color: #fff;
box-shadow: 0 12px 28px rgba(3, 20, 36, 0.22);
cursor: pointer;
transform: translateY(-50%);
transition: transform 0.2s ease, background 0.2s ease;
}
body.bad-sanierung-polish .bsp-badprojekt-swiper__prev .lucide {
width: 22px;
height: 22px;
}
body.bad-sanierung-polish .bsp-badprojekt-swiper__prev:hover {
background: #e6007e;
transform: translateY(-50%) scale(1.06);
}
body.bad-sanierung-polish .bsp-badprojekt-swiper__prev:disabled,
body.bad-sanierung-polish .bsp-badprojekt-swiper__next:disabled {
opacity: 0;
pointer-events: none;
}
body.bad-sanierung-polish .bsp-badprojekt__placeholder-media {
border: 1.5px dashed rgba(12, 35, 53, 0.18);
background: #f4f7fa;
}
body.bad-sanierung-polish .bsp-badprojekt__placeholder-fill {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: rgba(12, 35, 53, 0.28);
}
body.bad-sanierung-polish .bsp-badprojekt__placeholder-fill .lucide {
width: 15%;
height: 15%;
min-width: 28px;
min-height: 28px;
}
body.bad-sanierung-polish .bsp-badprojekt__placeholder-media .bsp-badprojekt__label {
background: rgba(12, 35, 53, 0.35);
}
/* [hidden] allein reicht nicht: die Basisregel .bsp-badprojekt__card
{ display:flex } aus dem Autor-Stylesheet gewinnt sonst gegen das
UA-Standard-[hidden]{display:none} (gleiche Spezifität, aber
Autor-Regeln schlagen User-Agent-Regeln immer). */
body.bad-sanierung-polish .bsp-badprojekt__card[hidden] {
display: none;
}
/* Keine eigene "gedämpfte" Optik mehr für Folie 3 — auf Wunsch nutzen
jetzt alle drei Folien exakt dieselben Klassen und Farben, ohne
optische Unterscheidung nach "echtes Projekt" vs. "folgt noch". */
@media (max-width: 767.98px) {
body.bad-sanierung-polish .bsp-badprojekt-swiper__prev {
left: 8px;
}
}
/* ============================================================
Ersetzt die dunkle "Unser Ablauf"-Section (service-flow-band, aus
der geteilten service-hub-premium.css) komplett durch eine eigene,
helle Version nach Kundenvorlage: Nummern-Kreise + Verbindungslinie
statt dunkler Karten. Eigene Klassen statt Overrides der geteilten
Komponente, weil sich fast jede Eigenschaft ändert (hell statt
dunkel, mit Nummern, andere Icon-Optik) — ein Override wäre
fragiler gewesen als eine frische, eigene Komponente.
Auf Wunsch großzügiger als die Vorlage: dort wirkten die 6 Schritte
mit Überschrift in einer Zeile sehr gedrängt. Überschrift bekommt
hier eine eigene Zeile mit mehr Abstand, die Schritte darunter mit
spürbar mehr Luft zwischen Icon, Nummer, Titel und Text. */
/* .bsp-process ist kein eigenes mehr, sondern der zweite
Inhaltsblock INNERHALB von .bsp-scope — "Was wir für Sie übernehmen"
und "So läuft Ihre Badsanierung ab" gehören inhaltlich zusammen und
teilen sich jetzt den blauen Hintergrund als EINE Section, statt als
zwei getrennte Blöcke mit hartem Farbwechsel aneinanderzustoßen. */
body.bad-sanierung-polish .bsp-process__wrap {
padding: 96px 0 clamp(70px, 8vw, 110px);
}
body.bad-sanierung-polish .bsp-process__head {
max-width: 640px;
margin: 0 auto 64px;
text-align: center;
}
body.bad-sanierung-polish .bsp-process__head .service-hero-clean__kicker {
justify-content: center;
color: #e6007e;
}
body.bad-sanierung-polish .bsp-process__head h2 {
margin: 16px 0 0;
color: #0c2335;
font-family: var(--font-display);
font-size: clamp(2.1rem, 3.4vw, 2.8rem);
font-weight: 900;
line-height: 1.2;
}
body.bad-sanierung-polish .bsp-process__steps {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 32px 20px;
margin: 0;
padding: 0;
list-style: none;
}
body.bad-sanierung-polish .bsp-process__steps::before {
content: "";
position: absolute;
top: 34px;
left: calc(100% / 12);
right: calc(100% / 12);
height: 0;
border-top: 1px dashed rgba(230, 0, 126, 0.3);
z-index: 0;
}
body.bad-sanierung-polish .bsp-process__steps li {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
body.bad-sanierung-polish .bsp-process__icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 68px;
height: 68px;
border-radius: 50%;
background: #fff;
color: #e6007e;
box-shadow: 0 10px 26px rgba(12, 35, 53, 0.12), inset 0 0 0 1.5px rgba(230, 0, 126, 0.28);
}
body.bad-sanierung-polish .bsp-process__icon .lucide {
width: 26px;
height: 26px;
}
body.bad-sanierung-polish .bsp-process__num {
color: #e6007e;
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 900;
}
body.bad-sanierung-polish .bsp-process__steps h3 {
margin: 0;
color: #0c2335;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-process__steps p {
margin: 0;
max-width: 30ch;
color: #536876;
font-size: 0.84rem;
line-height: 1.65;
}
@media (max-width: 1199.98px) {
body.bad-sanierung-polish .bsp-process__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 48px;
}
body.bad-sanierung-polish .bsp-process__steps::before {
display: none;
}
}
@media (max-width: 640px) {
body.bad-sanierung-polish .bsp-process__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ============================================================
"Was wir für Sie übernehmen" — Übersicht mit Foto + 6 Leistungs-
Karten, nach Kundenvorlage. Bild-Hinweis: dieselbe echte Vorher/
Nachher-Aufnahme wie an anderer Stelle der Seite, neuer eigener
Ausschnitt. Auf Wunsch großzügiger als die Vorlage: dort wirkten
Foto und Karten sehr dicht gedrängt. */
/* Blauer Hintergrund + weiche Glanzlicht-Überlagerung statt reinem
Weiß, damit sich die Section optisch von den Sections davor/danach
abhebt. Dieselbe Bauweise wie .care-cta-section in style.css (zwei
radial-gradient-Schichten für Tiefe + linear-gradient als Basis),
nur mit dem Marken-Blau statt Magenta (--primary/--primary-dark). */
/* Nur noch padding-top: .bsp-process__wrap trägt jetzt die eigene
Abstands-/Boden-Padding für den zweiten Block (siehe unten) — sonst
würde sich am Ende der zusammengeführten Section die Polsterung
beider Blöcke aufaddieren. */
/* Kühles Blaugrau-Weiß statt des warmen Pink-Milchtons — derselbe
Overlay-Aufbau (zwei zarte Glanzlichter + heller Grund), nur mit
Marken-Blau statt Magenta für den Farbstich. */
body.bad-sanierung-polish .bsp-scope {
position: relative;
overflow: hidden;
padding: clamp(70px, 8vw, 110px) 0 0;
background:
radial-gradient(circle at 92% 4%, rgba(3, 83, 164, 0.07), transparent 42%),
radial-gradient(circle at 4% 98%, rgba(3, 83, 164, 0.05), transparent 46%),
#f5f8fb;
}
body.bad-sanierung-polish .bsp-scope__top {
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 70px);
align-items: center;
margin-bottom: 56px;
}
body.bad-sanierung-polish .bsp-scope__copy .service-hero-clean__kicker {
color: #e6007e;
}
body.bad-sanierung-polish .bsp-scope__copy h2 {
margin: 16px 0 20px;
color: #0c2335;
font-family: var(--font-display);
font-size: clamp(2rem, 3.2vw, 2.7rem);
font-weight: 900;
line-height: 1.2;
}
body.bad-sanierung-polish .bsp-scope__copy p {
margin: 0;
max-width: 46ch;
color: #536876;
font-size: 1rem;
line-height: 1.75;
}
body.bad-sanierung-polish .bsp-scope__media {
position: relative;
margin: 0;
aspect-ratio: 2 / 1;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 30px 64px rgba(3, 35, 53, 0.16);
}
/* Das aktuelle Foto ist ein eigenständiges Querformat. Es darf nicht
wie das frühere zusammengesetzte Vorher/Nachher-Motiv auf 200 %
Breite gezogen werden, da es sonst sichtbar weich und verzerrt wird. */
body.bad-sanierung-polish .bsp-scope__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 58% 42%;
}
/* Dezenter Verlauf am unteren Bildrand, unabhängig vom Motiv darunter
— gibt dem Foto mehr Tiefe und lässt die schwebende Karte immer auf
ruhigem, ausreichend dunklem Grund sitzen (dasselbe Prinzip wie
.service-praxis-cube__scrim in service-hub-premium.css). */
body.bad-sanierung-polish .bsp-scope__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(3, 20, 36, 0) 60%, rgba(3, 20, 36, 0.5) 100%);
pointer-events: none;
}
body.bad-sanierung-polish .bsp-scope__badge {
position: absolute;
left: 24px;
bottom: 24px;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-radius: 14px;
background: #fff;
box-shadow: 0 16px 32px rgba(3, 20, 36, 0.22);
}
body.bad-sanierung-polish .bsp-scope__badge .lucide {
flex-shrink: 0;
width: 26px;
height: 26px;
color: #e6007e;
}
body.bad-sanierung-polish .bsp-scope__badge strong {
display: block;
color: #0c2335;
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-scope__badge span {
display: block;
margin-top: 2px;
color: #536876;
font-size: 0.78rem;
}
body.bad-sanierung-polish .bsp-scope__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
/* Zentriert statt linksbündig — Icon, Titel, Linie und Text mittig,
damit die Karten ruhiger und harmonischer wirken. Weiß statt Hellgrau:
der Section-Hintergrund ist jetzt selbst ein sehr helles Blaugrau,
ein reines Weiß hebt die Karten davon spürbar ab (dafür ein dezenter
permanenter Schatten zur Abgrenzung, statt nur beim Hover). */
body.bad-sanierung-polish .bsp-scope__grid li {
padding: 30px 26px;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 36px rgba(12, 35, 53, 0.08);
text-align: center;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
/* Hover-Lift wie bei .service-solutions-grid__grid article — dieselben
Werte, damit sich Karten auf der ganzen Seite konsistent anfühlen. */
body.bad-sanierung-polish .bsp-scope__grid li:hover {
transform: translateY(-6px);
box-shadow: 0 24px 48px rgba(12, 35, 53, 0.16);
}
body.bad-sanierung-polish .bsp-scope__grid .lucide {
width: 32px;
height: 32px;
margin-bottom: 22px;
color: #e6007e;
}
body.bad-sanierung-polish .bsp-scope__grid h3 {
margin: 0 0 14px;
color: #0c2335;
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 800;
line-height: 1.35;
}
body.bad-sanierung-polish .bsp-scope__rule {
display: block;
width: 30px;
height: 3px;
margin: 0 auto 16px;
border-radius: 2px;
background: #e6007e;
}
body.bad-sanierung-polish .bsp-scope__grid p {
margin: 0;
color: #536876;
font-size: 0.86rem;
line-height: 1.65;
}
@media (max-width: 1199.98px) {
body.bad-sanierung-polish .bsp-scope__top {
grid-template-columns: 1fr;
}
body.bad-sanierung-polish .bsp-scope__media {
aspect-ratio: 16 / 9;
}
body.bad-sanierung-polish .bsp-scope__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 24px;
}
}
@media (max-width: 480px) {
body.bad-sanierung-polish .bsp-scope__grid {
grid-template-columns: 1fr;
}
body.bad-sanierung-polish .bsp-scope__badge {
left: 14px;
right: 14px;
bottom: 14px;
}
}
/* ============================================================
Dunkle Terminbuchungs-Leiste nach dem Ablauf, nach Kundenvorlage.
"In nur 2 Minuten angefragt" 1:1 aus der Vorlage übernommen (auf
Kundenwunsch: exakte Zahlen/Texte aus dem Bild übernehmen). */
/* Zurück zur ursprünglichen, von der Blau-Section unabhängigen Navy-
Farbe — das Angleichen an das Blau war nur nötig, solange die
Section darüber blau war; jetzt, wo die wieder milchweiß ist,
braucht die CTA-Leiste kein Blau mehr, sondern wieder ihr eigenes,
neutrales Dunkel. */
body.bad-sanierung-polish .bsp-cta-band {
padding: 56px 0;
background: #0c2335;
}
/* Klare Trennlinien zwischen Intro/Checkliste/Button statt frei
schwebender Blöcke mit viel Leerraum dazwischen — dasselbe Prinzip
wie bei den Trennlinien in .bsp-badprojekt__card, damit die Leiste
strukturiert statt unausgewogen wirkt. Nur ab 992px: darunter wird
ohnehin gestapelt, Trennlinien würden dort falsch aussehen. */
body.bad-sanierung-polish .bsp-cta-band__grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 32px;
}
@media (min-width: 992px) {
body.bad-sanierung-polish .bsp-cta-band__checks {
padding: 0 36px;
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
}
body.bad-sanierung-polish .bsp-cta-band__intro {
display: flex;
align-items: flex-start;
gap: 20px;
flex: 1 1 340px;
}
body.bad-sanierung-polish .bsp-cta-band__icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(230, 0, 126, 0.16);
color: #ff5ba8;
}
body.bad-sanierung-polish .bsp-cta-band__icon .lucide {
width: 26px;
height: 26px;
}
body.bad-sanierung-polish .bsp-cta-band__kicker {
display: block;
margin-bottom: 8px;
color: #ff5ba8;
font-family: var(--font-display);
font-size: 0.74rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Fester statt vw-skalierter Wert: mit "clamp(...,1.9vw,...)" wuchs
der Titel auf breiten Screens deutlich über die eigentlich gewollte
Größe hinaus und wirkte neben dem kompakten Rest der Leiste zu groß
und unausgewogen. */
body.bad-sanierung-polish .bsp-cta-band__intro h2 {
margin: 0 0 8px;
color: #fff;
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 800;
line-height: 1.3;
}
body.bad-sanierung-polish .bsp-cta-band__intro p {
margin: 0;
max-width: 42ch;
color: rgba(255, 255, 255, 0.6);
font-size: 0.86rem;
line-height: 1.65;
}
body.bad-sanierung-polish .bsp-cta-band__checks {
display: flex;
flex-wrap: wrap;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
flex: 1 1 420px;
}
body.bad-sanierung-polish .bsp-cta-band__checks li {
display: flex;
align-items: flex-start;
gap: 10px;
}
body.bad-sanierung-polish .bsp-cta-band__checks .lucide {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
color: #ff5ba8;
}
body.bad-sanierung-polish .bsp-cta-band__checks strong {
display: block;
color: #fff;
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 800;
}
body.bad-sanierung-polish .bsp-cta-band__checks span {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
}
body.bad-sanierung-polish .bsp-cta-band .action-primary {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
body.bad-sanierung-polish .bsp-cta-band .action-primary {
width: 100%;
justify-content: center;
}
}