KLARWERK Fahrzeugpflege

Context

A demo build for the detailing trade rather than a commissioned project. Detailing is sold on the difference between before and after, and the customer decides on a phone — so the comparison had to be the centre of the page, and the whole thing had to stay editable by hand: open a file, change the text, upload.

What I built

• 01Plain HTML, CSS and vanilla JavaScript. No framework, no bundler, and no external requests — even the fonts are served from the site's own origin.
• 02Two before/after sliders built as paired images with a draggable divider, plus a sticky header.
• 03One accent colour drives the entire theme: every other shade derives from it through color-mix(), so recolouring the site for a given business is a single variable.
• 04Price cards laid out as a container-query grid — one column, two from 768px, three from 1024 — with the price scaling to its own card, so a long package name can never force the page to scroll sideways.
• 05Impressum and Datenschutz written to German requirements, with security and cache headers set at the edge.

Result

Built as a demo and kept behind noindex. The before/after pairs are example shots, labelled as such on the page — a real one would launch with the business's own photography.