Bisher lief der Hinweis nur einmal, nachdem die Kartenreihe sichtbar wurde -
Kundenwunsch war eine regelmaessige Wiederholung, solange man noch auf der
ersten Kachel steht. Neues Setting package_wheel_hint_interval (Sekunden,
Default 8, 2-120 geklammert) steuert den Abstand ueber Admin -> Einstellungen
-> Kachel-Layout.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Kachel-Mindesthoehe war fix auf 640px, dadurch ragten Pakete auf dem Handy
weit ueber den Bildschirm hinaus (Kundenfeedback). Jetzt 420px auf Mobile,
640px ab Desktop-Breite.
Der Mausrad-Hinweis lief bisher sofort beim Laden ab, oft bevor die
Kartenreihe ueberhaupt sichtbar gescrollt war - deshalb kam er beim Kunden
nicht an. Spielt jetzt erst ab, sobald die Reihe tatsaechlich im Blickfeld ist.
Leistungen-Karten ohne eigenen CTA (alles ausser Car-Hifi) hatten gar keinen
Link. Fallen jetzt auf das Kontaktformular zurueck statt ins Leere zu laufen.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
A single long Google review made every card in the row stretch to match
it (default flex align-items: stretch), leaving short reviews with a
huge empty gap before the name - reported with a real screenshot where
one card towered over its neighbors.
The review paragraph is now capped at line-clamp-6, so no single card's
natural height is unbounded anymore - stretch still aligns the row, but
to a reasonable, consistent height instead of an outlier's full text.
Full text stays in the DOM (still copyable/accessible), just visually
truncated with a native ellipsis.
Added a bit more visual polish while in there: a subtle decorative quote
mark per card, a hover shadow lift, and an avatar next to each name -
the reviewer's real Google profile photo when available, otherwise a
colored initial-letter circle (Home.jsx now passes profile_photo_url
through, previously fetched but unused).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The homepage's "reviews" section was never real - a fixed array of 10
hand-written quotes in the translation files plus a manually-typed
"5,0 von 181 Kunden bewertet" string, none of it sourced from Google.
Wires it to the real thing via the Places API (New), cached in the
database and refreshed on a schedule rather than fetched live per
visitor - the public /google-reviews endpoint only ever reads the last
successfully cached result, so page traffic never touches Google's API
or its quota. Mirrors the existing audio4cars price-refresh cron exactly
(same bootstrap-config-fetch-store shape): refresh_google_reviews.php
reads the Place ID + API key from app_settings, calls
GooglePlacesReviewsFetcher, and replaces the google_reviews table
wholesale on success; refresh_google_reviews.bat is the Task Scheduler
entrypoint. A failed refresh leaves the previous good data in place and
only records the error message, so a bad night never blanks the section.
Admin config lives in a new "Google-Rezensionen" block on the Website
settings page (Place ID + API key, matching the existing GA
service-account field's "leave blank to keep" behavior for the key) plus
a "Jetzt aktualisieren" button to test immediately rather than wait for
the nightly job - both hit the same GoogleReviewsController the cron
script's service class does.
Home.jsx now fetches /google-reviews and swaps in the live rating and
quotes only once at least one fetched review has actual text (Google
sometimes returns star-only reviews with no comment, which StarRating's
quote cards can't render) - until then, or if nothing is configured yet,
it falls back to exactly the previous hardcoded testimonials, so the
section never looks broken mid-rollout. TestimonialSlider/StarRating now
take a per-review rating instead of always drawing 5 stars.
Verified end-to-end except the live Google call itself, which needs a
real API key: schema migration, settings save/load (including the
key's "blank = unchanged" behavior), the CLI script's two failure paths
(unconfigured, and a real Google 400 for an invalid key - confirming the
Places API (New) request shape is correct), and the full display path by
seeding fake "successful" rows directly - homepage correctly switched to
the live rating/quotes and back to the fallback after clearing them.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Import always replaced everything - brands, packages, services, FAQs,
gallery - in one irreversible sweep, even if you only wanted to bring in
one part (e.g. restoring just the gallery from an old backup while
leaving today's live catalog alone).
Backend: importData() now accepts a "sections" field (JSON array of
catalog/services/faqs/gallery) and only DELETE+INSERTs the tables that
belong to selected sections; anything not selected is left completely
untouched. Tables stay grouped the way their foreign keys require
(brands -> car_models -> packages -> package_products/upgrades as one
unit, gallery_brands -> gallery_projects -> gallery_photos as another) -
importing "packages" without its models would either orphan rows or
silently rewrite unrelated ones, so the groups aren't splittable further.
Restored images are filtered to just the ones referenced by the tables
actually being imported, so deselecting the gallery means its images
aren't written to /uploads either. No sections field (older callers)
still imports everything, matching prior behavior.
Frontend: picking a file parses it client-side (file.text() + JSON.parse)
to show each section with live counts pulled straight from the file
("4 Marken, 15 Modelle, 17 Pakete"), all checked by default. The
confirmation checkbox's warning text names only what's actually
selected. If parsing fails client-side the picker just doesn't render -
the import still goes through server-side with the (safe) default of
importing everything.
Verified end-to-end against a real ~54MB export: importing only "faqs"
reverted a changed FAQ while a newly added test brand survived
untouched; importing only "catalog" right after removed that test brand
while the FAQ stayed as already restored - confirming sections are
fully independent both ways.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Root cause: the export embeds the whole gallery as base64 directly in the
JSON (that's how it stays a single self-contained file), which pushes a
realistic export well past 40MB. PHP's post_max_size/upload_max_filesize
default to values well under that on most hosting, so the browser's
upload got silently discarded before the app ever saw it - PHP clears
$_FILES and $_POST once post_max_size is exceeded, and the leftover raw
body in php://input is unparsed multipart data, not JSON, so it fell
into a generic "invalid file" 422 with no indication of what actually
went wrong. Reproduced locally with a real ~43MB export against the
previous 40M limit.
Raises the limits to 200M via two paths, since we don't know which PHP
SAPI the various hosting targets (All-Inkl, the Plesk test server) use:
hifi/.htaccess sets php_value overrides for classic Apache module PHP,
guarded by <IfModule> checks for several common module names so hosts
running PHP-FPM/CGI (which ignore php_value and would otherwise choke on
an unrecognized directive) skip the block instead of 500ing the entire
site; hifi/api/public/.user.ini covers exactly that FPM/CGI case, which
mod_php hosts in turn simply don't read.
Also makes SettingsController::importData() detect an oversized upload
by comparing Content-Length against the configured post_max_size, and
report the actual limit instead of the generic corrupt-file message -
so if some host's real limit is still too low, the admin sees why
instead of a dead end.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The existing peek animation (row nudges right and back on first load)
only demonstrated that the row moves, not how to move it - ambiguous
now that mouse-drag is gone. On non-touch devices it's paired with a
small pill ("Mit dem Mausrad blättern" / "Scroll to browse", mouse icon
flanked by chevrons) that fades in around the peek and out ~1.2s later,
floating centered over the row at a z-index above even the frontmost
coverflow card. Touch devices keep just the peek, since swiping is
already self-explanatory there. Plays once per page load, gated behind
the same reduced-motion check as the peek itself.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Client feedback: a light/small scroll snapped back to the current card
instead of advancing - native scroll-snap always settles on whichever
card is nearest, and a light nudge rarely crosses the halfway point.
Each wheel burst now tracks its starting card index and net deltaY.
On settle, if the nearest card by position is still the start card but
there was clear directional movement (>4px net), the row advances one
card in that direction instead of springing back - so even a light
wheel tick pages forward. Larger scrolls are unaffected: if the actual
scroll position already lands closer to a farther card, it jumps
straight there (no artificial one-card-per-burst cap), and a burst that
nets out near zero (e.g. wiggling back and forth) correctly stays put.
The settle target is computed the same way the old drag-to-scroll
feature centered cards, and re-enables scroll-snap only after the
settling scrollTo animation would have finished, so it doesn't fight
the smooth scroll.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Client feedback: after removing mouse-drag on the coverflow (it fought
the 3D transform), the thin scrollbar underneath was the only desktop
way to browse tiles - too fiddly.
Hovering the tile row and scrolling the wheel now moves the row
horizontally, fluid/1:1 with the wheel delta rather than snapping one
card per tick, with scroll-snap briefly suspended during the burst and
re-enabled ~150ms after the last tick so cards settle into place
afterward - the same pattern already used for the old drag interaction.
At the first card, scrolling further "up" is left alone (no
preventDefault): the event falls through to native behavior, which is
already exactly how the page scrolls today when hovering the row, so
the page scrolls up instead. Same at the last card scrolling "down" -
the page takes over. Horizontal wheel/trackpad sideswipe (deltaX) is
untouched, since the container already handles that natively. Applies
uniformly to both strip and coverflow (same scrollerRef container); the
scrollbar stays as-is.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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>
Client wants the tier called just "Elite". Only the admin checkbox list
(PACKAGE_TIERS) carries tier names; public card theming is price-rank
based, so nothing else changes. An already-created "Elite R" package
would show up under "Weitere Pakete (alte Namen)" in the editor and can
be deleted and recreated as Elite there.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The client's hosting (All-Inkl) has no GitHub integration, so the
two-branch model - source on main, CI force-pushing the built hifi/
folder to a machine-generated deploy branch for Plesk to pull - doesn't
work there. main is now simultaneously the source of truth and the
deployable artifact:
- hifi/index.html, hifi/assets/, favicon, robots.txt and hifi/api/vendor
are committed instead of git-ignored. Secrets (db.php, setup.php,
ga-service-account.json) stay ignored as before.
- A prebuild script wipes hifi/assets + index.html before every vite
build, so the tree always holds exactly the current build - this was
the stale-hash-chunk problem that originally justified ignoring the
output (emptyOutDir stays false to protect hifi/api). Builds are
deterministic: rebuilding without source changes yields zero diffs.
- .github/workflows/build-deploy.yml is deleted; nothing writes to the
deploy branch anymore. The convention is to run npm run build before
committing (DEPLOY.md documents the workflow, the All-Inkl setup via
SSH clone/pull with docroot on <checkout>/hifi, and the Plesk test
server switch from deploy to main).
The remote deploy branch is left in place for now so the Plesk test
server keeps working until its Git source is switched to main; it can
be deleted afterwards.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The public package tiles stopped showing per-package icons and taglines,
so their admin inputs were dead weight - the IconPicker alone dominated
the form. Both fields are gone from the batch editor and the overview
table; stored values stay untouched because the fields remain in the
save payload, they just can't be edited anymore.
The "Empfohlen" badge sat at -top-3, half outside a card that clips via
overflow-hidden (rounded corners + road artwork), cutting the badge in
half. It now sits at top-2 fully inside the tile, above the name.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Client feedback: creating ~30 models x 8 packages through the old
one-at-a-time form (free-text name, rows={3} description box) was
unworkable. Package names are always the same eight tiers, so the form
asked for information that was never variable.
The page is now a batch editor: pick brand + model, get the eight
standard tiers (Base, Clear, Drive, Prime, Elite R, Apex, The Statement,
Limitless - new shared constant in constants/packageTiers.js) as
checkbox rows. Checking a row opens a large auto-growing description
textarea and the markup fields; icon/tagline/price-text/featured/sort
live in a collapsed details block. One "Alle speichern" button creates
and updates everything in one pass, with per-row error reporting and
failed rows keeping their input. Existing packages load pre-filled;
packages with non-standard names appear in a read-only-named legacy
section, still editable and deletable. Deleting stays behind an explicit
button - unchecking never deletes. The old all-packages table remains
below as a collapsible overview, and its Bearbeiten action now jumps
into the batch editor.
New endpoint POST /models/{id}/copy-packages copies every package of a
source model - including linked package_products rows with their cached
scrape data, so no re-scraping - onto the target, skipping tiers whose
slug already exists there (backed by uniq_model_slug), all in one
transaction. The editor exposes it as "Pakete von anderem Modell
kopieren" with a copied/skipped result line: set up one model, replicate
to the other 29, adjust.
The public tier theming is intentionally untouched: ModelPage keeps
assigning card themes by price rank, so legacy package names continue to
render correctly.
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>
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>
