Address second round of client feedback

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>

hifi-src/src/components/AdminLayout.jsx

@@ -4,6 +4,7 @@ import { useAuth } from '../context/AuthContext.jsx';
 import { api } from '../api/client.js';
 import ThemeToggle from './ThemeToggle.jsx';
 import logo from '../assets/logo.png';
+import logoDark from '../assets/logo-dark.png';
 
 const ICONS = {
   home: 'M3 11.5 12 4l9 7.5M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9',
@@ -128,8 +129,9 @@ export default function AdminLayout() {
     <div className="flex min-h-screen bg-neutral-50 text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
       <aside className="hidden w-60 shrink-0 border-r border-neutral-200 p-4 dark:border-neutral-800 sm:block">
         <div className="mb-6 flex items-center gap-2 px-3">
-          <span className="rounded-lg px-2 py-1 dark:bg-white">
+          <span className="rounded-lg px-2 py-1">
-            <img src={logo} alt="HifiPlanet" className="h-7 w-auto" />
+            <img src={logo} alt="HifiPlanet" className="h-7 w-auto dark:hidden" />
+            <img src={logoDark} alt="HifiPlanet" className="hidden h-7 w-auto dark:block" />
           </span>
           <span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">Admin</span>
         </div>
@@ -149,8 +151,9 @@ export default function AdminLayout() {
                   <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
-              <span className="rounded-lg px-1.5 py-0.5 dark:bg-white">
+              <span className="rounded-lg px-1.5 py-0.5">
-                <img src={logo} alt="HifiPlanet" className="h-6 w-auto" />
+                <img src={logo} alt="HifiPlanet" className="h-6 w-auto dark:hidden" />
+                <img src={logoDark} alt="HifiPlanet" className="hidden h-6 w-auto dark:block" />
               </span>
             </div>
             <p className="hidden text-sm text-neutral-500 dark:text-neutral-400 sm:block">

hifi-src/src/components/Navbar.jsx

@@ -7,6 +7,7 @@ import { useAuth } from '../context/AuthContext.jsx';
 import { useSiteSettings } from '../context/SiteSettingsContext.jsx';
 import { useLanguage } from '../context/LanguageContext.jsx';
 import logo from '../assets/logo.png';
+import logoDark from '../assets/logo-dark.png';
 
 const SHOP_URL = 'https://www.audio4cars.de/';
 
@@ -212,8 +213,11 @@ export default function Navbar() {
           </button>
         </div>
 
-        <Link to="/" className="flex items-center justify-self-center rounded-lg px-2 py-1 dark:bg-white">
+        {/* Im Dark Mode eigene Logo-Variante mit weisser Wortmarke statt weissem
-          <img src={logo} alt="HifiPlanet" className="h-14 w-auto sm:h-16" />
+            Chip hinter dem Logo (Kundenwunsch). */}
+        <Link to="/" className="flex items-center justify-self-center rounded-lg px-2 py-1">
+          <img src={logo} alt="HifiPlanet" className="h-14 w-auto dark:hidden sm:h-16" />
+          <img src={logoDark} alt="HifiPlanet" className="hidden h-14 w-auto dark:block sm:h-16" />
         </Link>
 
         <div className="flex items-center justify-self-end gap-1">

hifi-src/src/i18n/de.js

@@ -69,7 +69,7 @@ export default {
     selectVehicle: 'Fahrzeug auswählen',
     getInTouch: 'Kontakt aufnehmen',
     welcome: 'Willkommen bei HifiPlanet',
-    heroTitle: 'Audiophil aus Prinzip',
+    heroTitle: 'Home of pure Sound',
     heroSubtitle: 'Dein Car-Hifi Spezialist für individuelle Sound-Umbauten. Wähle dein Fahrzeug, entdecke passende Pakete und frag unverbindlich an – wir kümmern uns um den Rest.',
     stats: [
       { value: '20+', label: 'Jahre Erfahrung' },
@@ -78,12 +78,6 @@ export default {
       { value: 'International', label: 'anerkannter Car-Hifi-Spezialist' },
     ],
     brandsHeading: 'Marken, mit denen wir arbeiten',
-    howItWorks: "So funktioniert's",
-    steps: [
-      { title: 'Marke & Modell wählen', text: 'Finde dein Fahrzeug in wenigen Klicks.' },
-      { title: 'Sound-Paket entdecken', text: 'Passende Pakete inkl. aktueller Preise auf einen Blick.' },
-      { title: 'Unverbindlich anfragen', text: 'Wir melden uns zeitnah mit allen Details bei dir.' },
-    ],
     youtubeBadge: 'HifiPlanet präsentiert',
     youtubeTitle: 'Das Handwerk hinter deinem Sound',
     youtubeText: 'Entdecke die Handwerkskunst hinter unserer Arbeit',

hifi-src/src/i18n/en.js

@@ -69,7 +69,7 @@ export default {
     selectVehicle: 'Select vehicle',
     getInTouch: 'Get in touch',
     welcome: 'Welcome to HifiPlanet',
-    heroTitle: 'Audiophile by principle',
+    heroTitle: 'Home of pure Sound',
     heroSubtitle: 'Your car-hifi specialist for custom sound installations. Choose your vehicle, discover the right package and get in touch, no obligation – we take care of the rest.',
     stats: [
       { value: '20+', label: 'years of experience' },
@@ -78,12 +78,6 @@ export default {
       { value: 'International', label: 'recognized car-hifi specialist' },
     ],
     brandsHeading: 'Brands we work with',
-    howItWorks: 'How it works',
-    steps: [
-      { title: 'Choose make & model', text: 'Find your vehicle in just a few clicks.' },
-      { title: 'Discover a sound package', text: 'Matching packages with current prices at a glance.' },
-      { title: 'Get in touch', text: "We'll get back to you shortly with all the details." },
-    ],
     youtubeBadge: 'HifiPlanet presents',
     youtubeTitle: 'The craft behind your sound',
     youtubeText: 'Discover the artistry behind our work',

hifi-src/src/index.css

@@ -95,14 +95,13 @@ html.hifi-cursor-on :is(input, textarea, [contenteditable='true']) {
   transition: opacity 0.18s ease;
 }
 
-/* Schraege Ellipsenbahn wie der Orbit-Schwung im Logo - auf Hover in Weiss,
+/* Schraege Ellipsenbahn wie der Orbit-Schwung im Logo. */
-   damit sie sich von den markengruenen Buttons abhebt. */
 .hifi-cursor__ring {
   position: absolute;
   width: 38px;
   height: 15px;
   margin: -7.5px 0 0 -19px;
-  border: 1px solid rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(139, 234, 60, 0.85);
   border-radius: 50%;
   transform: rotate(-24deg) scale(0.6);
   transition: transform 0.22s ease;
@@ -115,14 +114,14 @@ html.hifi-cursor-on :is(input, textarea, [contenteditable='true']) {
   height: 5px;
   margin: -2.5px 0 0 -2.5px;
   border-radius: 9999px;
-  background: #ffffff;
+  background: #eaffdb;
-  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 6px rgba(139, 234, 60, 0.9);
 }
 
-/* Hover ueber Interaktivem: Orbit blendet ein und weitet sich, Kern wechselt auf
+/* Hover ueber Interaktivem: Orbit blendet ein und weitet sich, Kern wird groesser
-   WEISS (Kontrast zu den gruenen Schaltflaechen - Kundenwunsch), Satellit
+   und wechselt auf helles Lime (Kundenwunsch: "das Maus-Logo soll gruen sein wenn
-   beschleunigt via JS. Dunkler Aussenrand haelt den weissen Kern auch auf hellen
+   der Orbit hinzukommt"). Der weisse Rand + Glow halten ihn auch direkt auf den
-   Flaechen sichtbar. */
+   markengruenen Buttons erkennbar. Satellit beschleunigt via JS. */
 .hifi-cursor[data-state='hover'] .hifi-cursor__orbit {
   opacity: 1;
 }
@@ -130,10 +129,10 @@ html.hifi-cursor-on :is(input, textarea, [contenteditable='true']) {
   width: 16px;
   height: 16px;
   margin: -8px 0 0 -8px;
-  background: #ffffff;
+  background: #8bea3c;
   box-shadow:
-    0 0 0 1.5px rgba(0, 0, 0, 0.35),
+    0 0 0 1.5px rgba(255, 255, 255, 0.95),
-    0 0 12px rgba(255, 255, 255, 0.85);
+    0 0 12px rgba(139, 234, 60, 0.85);
 }
 .hifi-cursor[data-state='hover'] .hifi-cursor__ring {
   transform: rotate(-24deg) scale(1.45);
@@ -161,7 +160,7 @@ html.hifi-cursor-on :is(input, textarea, [contenteditable='true']) {
   height: 12px;
   margin: -6px 0 0 -6px;
   border-radius: 9999px;
-  border: 1.5px solid rgba(255, 255, 255, 0.9);
+  border: 1.5px solid rgba(139, 234, 60, 0.9);
   opacity: 0;
 }
 .hifi-cursor__pulse.is-live {

hifi-src/src/pages/admin/Login.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext.jsx';
 import logo from '../../assets/logo.png';
+import logoDark from '../../assets/logo-dark.png';
 
 export default function Login() {
   const { user, login, verifyTwoFactor } = useAuth();
@@ -51,7 +52,8 @@ export default function Login() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-neutral-50 px-4 dark:bg-neutral-950">
-      <img src={logo} alt="HifiPlanet" className="h-16 w-auto sm:h-20" />
+      <img src={logo} alt="HifiPlanet" className="h-16 w-auto dark:hidden sm:h-20" />
+      <img src={logoDark} alt="HifiPlanet" className="hidden h-16 w-auto dark:block sm:h-20" />
       {step === 'credentials' ? (
         <form onSubmit={handleCredentials} className="w-full max-w-sm rounded-xl border border-neutral-200 bg-white p-8 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
           <h1 className="mb-6 text-xl font-bold text-neutral-900 dark:text-white">Admin-Login</h1>

hifi-src/src/pages/public/Home.jsx

@@ -22,7 +22,7 @@ import youtubeVideo from '../../assets/videos/youtube-hintergrund.mp4';
 const YOUTUBE_URL = 'https://www.youtube.com/@hifiplanet2812';
 const YOUTUBE_VIDEO_ID = 'ostj2mKDVUc';
 
-const brands = ['Focal', 'Helix', 'Ground Zero', 'Mosconi', 'Hifonics', 'Audison'];
+const brands = ['Ground Zero Audio', 'Audison', 'Hertz', 'Helix', 'Brax', 'Gladen', 'Alpine', 'Pioneer', 'Kenwood', 'JVC'];
 
 // Native Pixelmasse der Bilder unten - nur fuer die width/height-Attribute auf <img>,
 // damit der Browser vor dem Laden Platz reserviert (verhindert Layout-Sprung). Die
@@ -43,7 +43,6 @@ export default function Home() {
   const { t, language } = useLanguage();
 
   const stats = t('home.stats');
-  const steps = t('home.steps');
   const galleryAlts = t('home.galleryAlts');
   const gallery = galleryImages.map((img, i) => ({ ...img, alt: galleryAlts[i] }));
   const testimonials = t('home.testimonials');
@@ -194,23 +193,6 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
-        <Reveal>
-          <h2 className="mb-8 text-center text-2xl font-bold text-neutral-900 dark:text-white">{t('home.howItWorks')}</h2>
-        </Reveal>
-        <div className="grid gap-6 sm:grid-cols-3">
-          {steps.map((step, i) => (
-            <Reveal key={step.title} index={i} className="rounded-xl border border-neutral-200 bg-white p-6 text-center dark:border-neutral-800 dark:bg-neutral-900">
-              <div className="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-brand-500 text-lg font-bold text-white">
-                {i + 1}
-              </div>
-              <h3 className="mb-1 font-semibold text-neutral-900 dark:text-white">{step.title}</h3>
-              <p className="text-sm text-neutral-600 dark:text-neutral-300">{step.text}</p>
-            </Reveal>
-          ))}
-        </div>
-      </section>
-
       <section className="relative flex min-h-[70vh] items-center justify-center overflow-hidden sm:min-h-[85vh]">
         <video
           autoPlay