fix: optimize vehicle photo URLs and update HTML preconnect and stylesheet links

frontend/app.js

@@ -156,11 +156,12 @@ function renderGrid() {
     emptyState.style.display = state.filtered.length ? "none" : "block";
 
     for (const v of state.filtered) {
+        const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);
         const card = document.createElement("article");
         card.className = "vehicle-card";
         card.innerHTML = `
             <div class="vehicle-photo">
-                <img src="${escapeAttr(v.photo_url)}" alt="${escapeAttr(v.brand)} ${escapeAttr(v.model)}" loading="lazy" decoding="async" />
+                <img src="${escapeAttr(photoUrl)}" alt="${escapeAttr(v.brand)} ${escapeAttr(v.model)}" loading="lazy" decoding="async" />
                 <span class="badge" aria-hidden="true">${escapeHtml(v.brand)}</span>
             </div>
             <div class="vehicle-body">
@@ -198,12 +199,13 @@ function renderGrid() {
 function openDetails(id) {
     const v = state.vehicles.find(x => x.id === id);
     if (!v) return;
+    const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);
     const lang = getLang();
     const desc = lang === "en" ? v.description_en : v.description_de;
 
     dialogTitle.textContent = `${v.brand} ${v.model}`;
     dialogBody.innerHTML = `
-        <img src="${escapeAttr(v.photo_url)}" alt="${escapeAttr(v.brand + ' ' + v.model)}" />
+        <img src="${escapeAttr(photoUrl)}" alt="${escapeAttr(v.brand + ' ' + v.model)}" />
         <p>${escapeHtml(desc || "")}</p>
         <div class="spec-row" style="margin:1rem 0;">
             <div><strong>${v.power_hp}</strong><span>${t("hp")}</span></div>
@@ -399,6 +401,7 @@ async function updateSidebar() {
     const kmPerWeekday = price.max_daily_km;
     const kmPerWeekendDay = price.max_km_weekend;
     const includedKm = (weekdays * kmPerWeekday) + (weekendDays * kmPerWeekendDay);
+    const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);
 
     bpfSidebarPlaceholder.style.display = "none";
     bpfSidebarContent.style.display = "block";
@@ -413,7 +416,7 @@ async function updateSidebar() {
         <div class="bpf-price-row muted" style="margin-top:0.8rem;"><span>${t("bpfDeposit")}</span><span>€ ${deposit.toLocaleString("de-DE")}</span></div>
         <div class="bpf-price-row muted"><span>${t("bpfIncludedKm")}</span><span>${includedKm} km</span></div>
         <div class="bpf-price-row muted"><span>${t("bpfExtraKm")}</span><span>€ 1,50${t("bpfPerKm")}</span></div>
-        <div class="bpf-car-preview" style="background-image:url('${escapeAttr(v.photo_url)}');"></div>
+        <div class="bpf-car-preview" style="background-image:url('${escapeAttr(photoUrl)}');"></div>
         <p class="bpf-car-name">${escapeHtml(v.brand)} ${escapeHtml(v.model)}</p>
         <p class="bpf-car-specs">${v.power_hp} ${t("hp")} • ${v.top_speed_kmh} ${t("kmh")} • ${escapeHtml(v.acceleration)}</p>
     `;
@@ -533,6 +536,12 @@ function escapeHtml(s) {
 }
 function escapeAttr(s) { return escapeHtml(s); }
 
+function optimizedVehiclePhotoUrl(url) {
+    const raw = String(url ?? "");
+    if (!raw) return raw;
+    return raw.replace("/images/ferrari-main-car.png", "/images/ferrari-main-car-mobile.jpg");
+}
+
 // ---------------- Boot ----------------
 langToggle.textContent = getLang() === "de" ? "EN" : "DE";
 applyI18n();

frontend/index.html

@@ -8,13 +8,11 @@
     <link rel="icon" type="image/svg+xml" href="/images/mc-cars-mark.svg" />
     <link rel="apple-touch-icon" href="/images/mc-cars-mark.svg" />
     <link rel="preload" as="image" href="/images/ferrari-main-car-mobile.jpg" fetchpriority="high" />
-    <link rel="preconnect" href="https://esm.sh" crossorigin />
+    <link rel="preconnect" href="https://esm.sh" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" onload="this.onload=null;this.rel='stylesheet'" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=optional" rel="stylesheet" />
-    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
+    <link rel="stylesheet" href="styles.css" />
-    <link rel="preload" as="style" href="styles.css" onload="this.onload=null;this.rel='stylesheet'" />
-    <noscript><link rel="stylesheet" href="styles.css" /></noscript>
     <!-- SEO & Social Meta Tags -->
     <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
     <meta name="keywords" content="Sportwagenvermietung Steiermark, Luxusauto mieten, Sportwagenverleih, Ferraris mieten Graz, Porsche mieten Österreich" />
@@ -52,7 +50,7 @@
         "alternateName": "MC Cars",
         "description": "Premium Sportwagen- und Luxusvermietung in der Steiermark",
         "url": "https://demo.lago.dev",
-        "logo": "https://demo.lago.dev/images/mc-cars-logo.png",
+        "logo": "https://demo.lago.dev/images/mc-cars-mark.svg",
         "image": "https://demo.lago.dev/images/mc-cars-og-image.png",
         "areaServed": {
             "@type": "Place",
@@ -76,7 +74,7 @@
         "@type": "Organization",
         "name": "MC Cars GmbH",
         "url": "https://demo.lago.dev",
-        "logo": "https://demo.lago.dev/images/mc-cars-logo.png",
+        "logo": "https://demo.lago.dev/images/mc-cars-mark.svg",
         "description": "Premium Sportwagen- und Luxusvermietung in Steiermark, Österreich",
         "foundingDate": "2024",
         "contactPoint": {