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 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>
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>
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>
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>
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>
