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>
The mouse drag-to-scroll on the card row felt off in combination with the
coverflow's 3D transform (client feedback), so it's removed - desktop users
now navigate via the custom scrollbar underneath, which was already there.
Touch devices keep native scroll-snap swiping, but on first load it wasn't
obvious the row was swipeable. Adds a one-time hint: the row glides right by
~40% of a card width and back, 500ms after mount. Touch-only (pointer:
coarse), skipped under prefers-reduced-motion, plays once per page load.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Logo: adds a dedicated dark-mode variant (grey wordmark lightened to
near-white, green orbit untouched) and drops the white background chip
that was previously painted behind the logo in dark mode across Navbar,
AdminLayout and the admin Login page.
Cursor: the hover core goes back to brand green (with a white rim/glow
for contrast on green buttons) instead of white, per clarified feedback.
Homepage: new hero slogan "Home of pure Sound" (replacing "Audiophil aus
Prinzip" / "Audiophile by principle" in both languages), the "So
funktioniert's" / "How it works" three-step section is removed, and the
brand marquee is replaced with the client's actual supplier list (Ground
Zero Audio, Audison, Hertz, Helix, Brax, Gladen, Alpine, Pioneer,
Kenwood, JVC).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Coverflow cards can now be grabbed and dragged with the mouse; touch
keeps native momentum scrolling. Pointer capture only engages after real
movement so ordinary clicks on card buttons still land, a capture-phase
click handler swallows exactly the one click that ends a drag, and on
release the row glides to the nearest card before snap re-engages.
The native horizontal scrollbar under strip and coverflow is replaced by
a slim centered track with a glowing brand-green thumb - draggable,
click-to-jump, and hidden automatically when everything fits.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Cursor: the default state is now just the green dot - the orbital ring and
satellite only appear over interactive elements, where the core switches
to white with a dark rim so it contrasts with the brand-green buttons
instead of vanishing green-on-green. The click pulse is white for the
same reason.
Packages: new optional price_text field (schema column, migration,
controllers, export/import columns, admin form). While set, it replaces
the "ab ca." label and computed price on the tile - e.g. "Coming soon".
Layouts: third package_card_layout option "coverflow" - a scroll-snap row
with CSS 3D perspective where the centered card faces front and its
neighbors rotate away, transforms driven per scroll frame (rAF-throttled,
ResizeObserver covers card expansion). Selectable in the admin website
settings next to grid and strip.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A filled brand-green core with a glowing satellite circling it on a
tilted elliptical path, echoing the orbit swoosh in the HifiPlanet logo.
Over interactive elements the core grows, the orbit widens and brightens,
and the satellite speeds up; clicking fires a subwoofer-style thump plus
an outward pulse ring. Core and orbit track the mouse in perfect sync -
only orbit speed and radius ease between states.
Enabled only on fine-pointer devices and disabled entirely under
prefers-reduced-motion (native cursor untouched in both cases). Over
text fields the orbit hides and the native I-beam takes over.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Re-encoded from the new 1440p source to the established delivery format:
1080p H.264, audio track stripped (it plays muted behind the dark
overlay), faststart for web streaming. 32.8 MB despite the longer runtime,
down from the previous 42.9 MB.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Cards show the first 5 bullet points; anything beyond that sits behind an
accent-colored toggle whose count itself signals package depth (pricier
packages carry longer lists). Expanding affects only the clicked card -
the row aligns items-start instead of stretching every neighbor to the
tallest card. The darkening gradient behind the list holds its opacity
almost to the bottom edge so the toggle and deep list entries stay
readable over the bright road glow, and the expanded state uses a denser
scrim for the same reason.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Extracts the 8 embedded road-glow images from the reference file into
assets/roads/ (PNG -> WebP, 5 MB -> 112 KB) and uses them as per-tier
card backgrounds, matched to each package's price rank. Card markup now
mirrors the reference exactly: Barlow Condensed header with gradient
divider, full-bleed road image, "ab ca." price section over the dark
scrim. Package bullet points sit at the top under the name, and the
contact button returns below the price. The two non-reference themes
keep the recolorable neutral glow.
The section background now follows the site's light/dark theme instead
of a fixed dark stage, with theme-aware scrollbar styling and a soft
card shadow so the dark tiles read as cards on the light surface. The
"X Stufen" heading above the tiles is removed.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Ports the exact 8-tier color progression, Barlow/Barlow Condensed typography,
centered gradient underline, and bottom price scrim from the client-provided
Kacheln.html mockup onto the existing dynamic package system. The material
color engine now stores exact RGB stops (including a dedicated border color)
instead of an HSL round-trip, since the reference colors were already exact
hex values. Price/label color is now fixed off-white per the design instead
of tracking the tier accent.
Drops the tagline and product bullet list to match the mockup's minimal
name+image+price layout - real packages still show these fields elsewhere,
but this tile design has no room for them. Keeps the existing dynamic
neutral-texture road glow (recolored per computed tier) instead of the
mockup's 8 bespoke per-tier photos, since real package counts aren't fixed
at 8. Adds a contact CTA button, which the static mockup doesn't need but
the live page does.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Cards were fixed-width and forced to scroll even when the row had room to
show all of them; they now flex between 190-240px and the strip row gets
its own wider container instead of the site's normal 1152px content width,
so a full tier lineup fits on typical desktop screens without scrolling.
The scrollbar itself is now a slim themed bar for the cases where scrolling
is still needed.
Also swaps the thin procedural SVG line for a Higgsfield-generated glow
texture, masked per card into that tier's accent color. Along the way,
fixes a real CSS bug where the WebP mask rendered as a solid block instead
of the intended thin line, because the image's alpha channel made the
browser default to alpha-based masking instead of reading its luminance -
fixed by forcing mask-mode: luminance.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Package cards go back to a permanently dark stage (all price tiers, not
just the priciest), with each theme sweeping through its own colour family
across the tiers instead of just lightening/darkening. Adds an admin toggle
between the previous wrapping grid and a new horizontal scroll strip of
narrow, tall cards. Card content is restructured to match the client's
reference mockup: no icon chip, centered uppercase name with a short
divider, an empty middle area that lets the glowing road motif show
through, then the feature list and price stacked at the bottom.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Cards now run pale at the cheapest tier to a deep, saturated color at the
priciest tier instead of a permanently dark stage, echoing credit-card tier
ladders. Also fixes the graphite theme's hue drifting into green and a
checkmark-icon contrast bug where the icon color could converge with the
card background at certain price tiers.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Dropped the "01 · EINSTIEG" style number/category eyebrow from package
cards per feedback. Added a real brushed-metal surface texture per theme
(generated via Higgsfield/GPT Image 2 - graphite steel, blue-black
titanium, warm bronze/copper), blended with the existing price-driven
color gradient via background-blend-mode so the material grain reads as
genuine surface detail while the escalation logic stays untouched.
Textures are pre-optimized WebP, 7-21KB each.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Removed the bottom legend row per feedback - the ask was for a visual
inside the tiles, not an explanatory key below them. Each card now has an
abstract flowing light-path drawn as SVG (no stock photography), colored
with that tier's accent and escalating from barely visible at the
cheapest tier to a bright glow at the priciest, matching the reference
mockup. Content sits in its own stacking context above the path so text
stays legible regardless of the background art.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Matches the reference mockups' bottom legend: one entry per category
(Einstieg/Upgrade/.../Referenz) with an icon, a label colored to match
that tier's accent, and a short description of what the category means.
Colors are sampled from the same material-theme system driving the cards
above, so it stays in sync with whichever card theme is selected.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bullet lists on package cards now use accent-colored checkmarks instead of
plain browser dots. The card color system is now driven by a persistent
site setting (Admin > Einstellungen > Website > "Paket-Kachel-Design")
with three curated themes - Graphite Green, Deep Blue Luxury, and Warm
Bronze - all converging on the same dark "Onyx + Gold" treatment for the
priciest tier, matching the reference mockups.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Flat cards on the regular page background couldn't deliver the
elegance/luxury feel from the reference mockups. The tier grid now sits
on its own always-dark full-bleed section (independent of site light/dark
mode, like a vehicle configurator), with a section headline, larger
elegant tier numbering, glowing per-card divider lines, and thinner
hairline borders instead of thick ones - letting color and glow carry the
escalation instead of stroke weight.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Inspired by a reference mockup showing a numbered, categorized tier
lineup (Einstieg/Upgrade/.../Referenz). Each card now shows its price
rank (01, 02...) plus an auto-derived category eyebrow label, computed
the same way as the material-tier color system so it needs no extra
admin config and scales to any package count. Kept the existing
responsive grid rather than switching to a fixed horizontal row, since
the fixed layout looks broken for models with only 1-2 packages.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Label, tagline, list and price text only had their contrast verified for
the "dark card" side of the isDarkCard split - the "light card" side was
never checked against the actual background lightness, so a borderline
mid-gray tier (e.g. "The Statement") could land close enough to the muted
neutral-gray text to become nearly unreadable. Text colors are now
computed with a guaranteed lightness delta from the real background,
checked across all 8 tiers in both themes.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Package cards now progress through named material tiers instead of a
single gray/black hue - each tier gets its own accent color for border,
glow and price text (icon chip too), while the CTA button stays brand
green everywhere so the primary action stays recognizable across tiers.
Found and fixed a real bug along the way: blending adjacent materials
directly in HSL swept straight through unrelated hues (e.g. bronze at 24°
to silver at 212° passed through yellow-green), producing a muddy khaki
look instead of a clean bronze-to-silver transition. Blending in RGB space
instead fixes this.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Flat backgrounds looked dull on the gray tiers. Each card now gets a
subtle radial gradient anchored top-right (lighter tone fading into the
tier's base color), giving it depth without touching where text sits -
title/price/list are all left-aligned, so the highlight only ever falls
on empty card area, keeping legibility intact.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The saturated green mid-tones clashed with the green price text/border and
didn't read as premium. Background now ramps through neutral gray to black,
with green kept only as the accent (border, glow, price, button). Also
fixes a real contrast bug found along the way: the muted price-label text
was nearly invisible on mid-gray cards because its color happened to sit
at almost the same lightness as the background.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
With more than 3 packages the old plain/accent/premium buckets meant most
mid-priced packages looked identical. Card background, border and glow now
interpolate continuously by price rank (in HSL, not RGB, so the ramp stays
a clean green instead of passing through muddy gray-olive tones), and the
dark/light text switch is driven by the actual computed lightness instead
of an RGB luminance approximation, which was misjudging saturated mid-tone
greens as "light enough" for dark text and breaking contrast.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Package cards for every brand/model now scale their visual weight with
price rank within that model: cheapest stays plain, mid-tier packages get
a green-accented card, and the priciest gets a dark "premium" treatment
with a glowing border — no extra admin config needed. Also fixes an
invalid brand-950 Tailwind class (the palette only goes to 900) that was
silently dropping the intended dark-mode colors.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Packages now support an optional icon, a short tagline, and an "empfohlen"
flag, all editable in Admin > Pakete. The model page switches from a plain
stacked list to a responsive grid where the featured package gets a
highlighted border, badge, and bolder CTA — fixes the tiers looking
inconsistent when only some packages had bullet content.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Scraped all 13 brand categories, 29 vehicle projects, and 207 installation
photos from the legacy WordPress gallery, resized/compressed them, and added
them as seed images alongside a one-off "Galerie auf Standard zurücksetzen"
action (mirrors the existing services/FAQ reset buttons) that recreates the
full gallery structure with proper brand/project cover images.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
FAQ entries were previously hardcoded in the i18n dictionaries; they now live
in a new bilingual `faqs` table with full CRUD in the admin panel, a
reset-to-defaults action seeded with the current 6 questions, and the
homepage (incl. FAQPage JSON-LD) fetches them live per language. Export/
import was also extended to include FAQs and the full image gallery
(brands, projects, photos), which had been missing from that mechanism.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
border-neutral-200 was nearly invisible against the grained
background (both very light gray). Bumped to -300/dark:-700.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
That section sits directly on the grained page background with no
card of its own, so the grain showed through the CTA button too
(it has no background, just a border). Wrapping the text+button in
a plain white card matches how every other content block on the
page already avoids the grain.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The fixed full-viewport overlay painted grain over everything,
including cards, buttons, and the FAQ accordion that should stay
plain. Back to plain background-image on .page-texture plus a new
.grain-band class for the two structural full-width stripe sections
on the homepage - cards keep their own opaque background, which
naturally blocks it without any extra work.
Co-Authored-By: Claude Sonnet 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>
Only applies as the initial value when no theme preference is stored
yet - a manual toggle still sticks afterward, same precedent as the
browser-language auto-detection.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
New Dashboard section shows users/sessions/pageviews for the last 7
days plus top pages, fetched server-side via the GA4 Data API using a
Google service account (JWT-bearer flow, no OAuth consent screen
needed) - the same approach WordPress plugins like MonsterInsights use
to surface GA stats inline instead of linking out to analytics.google.com.
Backend: GoogleAnalyticsReporting support class (signs its own JWT with
openssl, exchanges it for an access token, calls runReport - no need
for the full Google API PHP client library for one endpoint) and
AnalyticsController (settings show/update, report fetch). The service
account JSON key is written to a gitignored config file, mirroring the
existing db.php/setup.php pattern for environment-specific secrets.
Admin: new "Dashboard-Anbindung" section in Website Settings (Property
ID + service account JSON paste, independent save action). Dashboard
gracefully shows a setup hint when not yet configured instead of an
error.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
"Connection successful" only means the SMTP server accepted the
message, not that it was delivered. The test endpoint now captures the
full SMTP protocol exchange and shows it in the admin UI, plus flags
the common case where the sender address differs from the SMTP login
- many providers silently discard mail in that situation.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a "Statistik" cookie category (alongside the existing external
media one), an admin-configurable Measurement ID field in Website
Settings, and a GoogleAnalytics component that only injects gtag.js
after the visitor has consented - mirrors the existing ExternalEmbed
pattern instead of loading tracking scripts unconditionally.
Also documents Google Analytics in the Datenschutzerklärung (new
section 8, remaining sections renumbered) since introducing a new
data processing purpose requires disclosure.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
New admin panel "E-Mail" tab (Einstellungen -> E-Mail) lets the shop
owner configure their SMTP server, test the connection with a real
test email, set which address receives new-inquiry notifications, and
edit both the customer confirmation email and the shop notification
email as templates with {{placeholder}} variables.
Previously SMTP config only lived in a non-DB config.php file (with a
blank host, so mail sending was effectively off) and there was no
customer confirmation email at all - only a hardcoded owner
notification. ContactController now sends both emails using the
DB-configured (or config.php-fallback) settings; mail sending stays
best-effort so a contact form submission never fails because of it.
Backend: new Mailer support class (config resolution, PHPMailer setup,
placeholder rendering) and MailSettingsController (show/update/test),
following the existing WebsiteSettings/DatabaseSettings conventions
(password never returned in plaintext, empty password on save keeps
the existing one). New app_settings columns wired into Schema.php so
the "Datenbankstruktur aktualisieren" admin button picks them up on
existing installs.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Previously the grain lived on .page-texture's own background-image, so
any section with its own opaque background color (bg-neutral-50 bands)
painted right over it. Moved the grain to a fixed, full-viewport overlay
that sits on top of everything instead.
Also fixed a failed attempt at using mix-blend-mode: overlay for a
single theme-agnostic texture - that blend mode has almost no visible
effect on backgrounds this close to pure white/black, since its math
compresses toward the backdrop at the extremes. Back to plain alpha
transparency with separate light/dark speckle colors, moderate opacity.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bumped the noise layer's alpha from 0.05/0.055 to 0.35/0.4 and coarsened
the turbulence frequency slightly - the previous version was too subtle
to notice at a glance.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Re-compressed the new source cut (1920x1080/30fps, 65s) at 1920px
width, CRF 22, no audio - same settings as before, 42.9MB.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The flat ambient-glow background (from an earlier "premium minimalism"
pass) read as plain white/black. Brings back the fine SVG noise grain
so the page background has some structure instead of a bare color.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The previous pass (1280px/CRF30, 8.2MB) looked visibly pixelated at
full hero width. Re-encoded from the original source at 1920px width
and a lower CRF for noticeably crisper detail, landing at 41MB - still
well under GitHub's 100MB limit and a fraction of the 177MB original.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Replaces the two-column badge/embed layout with a full-width background
video, dark overlay, and centered eyebrow/heading/CTA - matching the
cinematic teaser style used by other car-audio shops. The CTA links
directly to the specific YouTube video instead of just the channel.
The provided source video (177MB, 2560x1440@60fps) was compressed for
web delivery: 1280px width, 30fps, audio stripped (video is muted
background anyway), H.264 CRF 30 - down to 8.2MB with no visible
quality loss at this scale.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The scale-110 utility set the same CSS transform property that Framer
Motion's y-parallax already controlled inline, silently canceling the
scale. The image never actually zoomed in, so the parallax shift had no
overflow buffer and exposed a bare strip at the bottom of the hero.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Prevents the next section from partially peeking in above the fold on
first load, so it only appears once the visitor actually scrolls.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
