Side-by-side with the prototype revealed the section never set its font
family - everything except the Michroma headings fell back to the system
font, which was the biggest visual mismatch (labels, subtitle, feature
bar). The section root now sets Barlow like the handoff specifies; the
subtitle even wraps identically to the prototype again.
The maps iframe crop is rebalanced (290px shifted -60px inside the 210px
window) so the map runs flush to the "Route planen" bar with Google's
bottom attribution cut at the card edge like the prototype, instead of
showing the full attribution line with a gap. The contact card is titled
"HiFi Planet Amorbach" per the design (was "HifiPlanet Amorbach").
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Third iteration on this backdrop: composing the layers natively (photo,
scrim, masks, streak stack, topo lines, grunge/splatter/arc) kept
drifting from the intended look, so the handoff now ships each theme's
background as a single pre-composed 2560x1440 image. All hand-built
layers are deleted; the section carries exactly one background-image
via .kontakt-sektion (cover/center), swapped for dark mode through the
existing .dark class. Obsolete layer assets are removed, the unused
imports with them.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The 310x512 car-light.png was scaled to the full section height via
background-size: cover, which blew it up far past its natural
resolution. It is now a plain <img> (.kontakt-bg-foto in index.css):
natural aspect ratio, width capped at clamp(280px, 24vw, 460px),
anchored bottom-left, opacity .9, and a dual mask (fade right + fade
top, mask-composite: intersect) so it dissolves into the page gradient
with no hard edges. The old scrim overlay is gone - the masks do that
job now.
The green light-streak group on the right is widened to the README's
42% at full section height (was 26%), line opacity .85 and radial glow
blur 20px per spec. Topo lines were already in place.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The redesign itself shipped earlier (78d3d4a, 3079bd2); comparing the
implementation against the README again surfaced two missing details:
- The light-mode backdrop's subtle topo wave lines (five 1px curved
paths in --kf-topo, top-left, ~360x280) were never implemented.
- The Google Maps embed showed Google's own info overlay in the top-left
corner behind our "In Maps öffnen" chip. The iframe is now rendered
taller inside a clipped 210px container with a negative top margin,
cropping that overlay away while keeping the marker and the required
bottom attribution visible.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Swaps the placeholder site photo (hero-trunk) for the actual asset from
the design handoff - a grayscale interior/speaker shot. Anchored bottom-
left at ~34% width with the README's scrim gradient over it, plus a
vertical mask fading the top edge to transparent so it blends into the
hero without a hard boundary. Hidden ≤980px and in dark mode, unchanged
otherwise.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Rebuilds /kontakt from the design handoff (src/referenz/Kontaktformular
Redesign/) using the site's own stack instead of copying the prototype's
inline-styled HTML: React + Tailwind arbitrary values bound to a small set
of CSS custom properties (.kf-page, index.css) that swap automatically
with the site's existing dark-mode class toggle - no separate theme
control was added, per the brief.
The "Deine Anfrage bezieht sich auf" package box wires into the existing
query-param handoff from the package picker (ModelPage's contactUrl:
brand/model/package/packageId/total) and only renders when all three are
present; the optional-upgrades picker that already existed on this page
is preserved and restyled to match. Submission still posts to the real
/api/contact endpoint (same payload shape as before), so requests keep
landing in the admin inbox.
Adds Michroma (heading/price font) alongside the already-loaded Barlow.
Michroma has no Euro-sign glyph (renders as tofu), so price displays
split the € into a plain-font span rather than showing a broken glyph.
Dark-mode background assets (grunge/splatter) come from the handoff;
the light-mode car photo reuses an existing site asset (hero-trunk) since
none was supplied, masked per the handoff's recipe.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Based on a Lighthouse audit of the live site (95 performance / 91
accessibility / 96 best-practices / 100 SEO), addressing everything
except the flagged color-contrast issues (kept as-is, reversible
color changes need a separate decision):
- Cache-Control headers for hashed/immutable static assets via
mod_headers (no mod_expires dependency, since that's not enabled
everywhere) - ~1.1MB saved on repeat visits
- Converted the code-bundled homepage photos to WebP (skipped
DB-managed/admin-uploaded images - those are content, not code) and
added explicit width/height so the browser can reserve space before
images load
- Bumped footer/contact-sidebar phone and email links to a 24px+
touch target via padding
- /auth/me now returns 200 + {authenticated:false} instead of 401 for
logged-out visitors - it's called on every public page load to
check session state, so "not logged in" is the normal case, not an
error; the 401 was showing up as a console error on literally every
page view
Left unchanged: the lucide-react bundle splitting (a previous,
deliberate tradeoff - splitting per-icon created ~1600 tiny chunk
files that failed to upload on shared hosting) and video preload
(no concrete issue found in the audit).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Auto-detects the visitor's browser language on first visit, with a
manual dropdown switcher (flag icons) in the header and mobile menu.
Legal pages, the admin panel, and DB-driven content stay German-only.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Swaps navbar layout (theme toggle left, nav links right), replaces the
mobile dropdown with a fullscreen overlay whose items fly in top-to-bottom,
and renames the site-wide "slate" gray to "neutral" to remove a blue
undertone that clashed with the brand green. Also converts the flat
saturated-green YouTube and stats sections into dark backgrounds with
green used only as an accent, matching typical premium car-audio branding.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a Website settings tab (hero image, phone, WhatsApp, email) that
feeds the navbar, footer and contact page via a new SiteSettingsContext,
redesigns the navbar with a bigger centered logo plus phone/WhatsApp/shop
links, and adds a VIN/chassis-number field to the contact form, admin
inbox and notification email.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
