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>
