fix: update hero image URL and improve preload for styles and fonts

frontend/admin.js

@@ -1114,7 +1114,7 @@ const mietvertragFeedback = document.querySelector("#mietvertragFeedback");
 
 async function renderSettings() {
     const { data } = await supabase.from("site_settings").select("value").eq("key", "hero_image_url").single();
-    const url = data?.value || "/images/ferrari-main-car.png";
+    const url = data?.value || "/images/ferrari-main-car-mobile.jpg";
     heroPreview.style.backgroundImage = `url('${url}')`;
 
     // Mietvertrag template status

frontend/app.js

@@ -543,6 +543,9 @@ loadVehicles();
 (async () => {
     const { data } = await supabase.from("site_settings").select("value").eq("key", "hero_image_url").single();
     if (data && data.value) {
-        document.querySelector(".hero").style.setProperty("--hero-bg", `url('${data.value}')`);
+        const heroUrl = data.value.includes("/images/ferrari-main-car.png")
+            ? "/images/ferrari-main-car-mobile.jpg"
+            : data.value;
+        document.querySelector(".hero").style.setProperty("--hero-bg", `url('${heroUrl}')`);
     }
 })();

frontend/index.html

@@ -8,10 +8,13 @@
     <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://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <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" />
+    <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 rel="stylesheet" href="styles.css" />
+    <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="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" />
@@ -39,8 +42,6 @@
     <meta name="twitter:description" content="Fahren Sie Premium-Sportwagen in der Steiermark. Faire Kaution, transparent, sofort startklar." />
     <meta name="twitter:image" content="https://demo.lago.dev/images/mc-cars-og-image.png" />
     
-    <script src="config.js"></script>
-    
     <!-- Structured Data (JSON-LD) -->
     <script type="application/ld+json">
     {
@@ -399,7 +400,7 @@
             <div class="footer-grid">
                 <div>
                     <div class="logo" style="margin-bottom:0.8rem;">
-                        <img class="logo-icon" src="/images/mc-cars-logo.png" alt="MC Cars Logo" onerror="this.style.display='none'" />
+                        <span class="logo-mark" aria-hidden="true">MC</span>
                         <span>MC Cars</span>
                     </div>
                     <p style="color:var(--muted);font-size:0.9rem;max-width:40ch;" data-i18n="footerTagline">Sportwagenvermietung in Österreich. Standort: Steiermark (TBD).</p>
@@ -445,6 +446,7 @@
 
     <div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>
 
+    <script src="config.js"></script>
     <script type="module" src="app.js"></script>
 </body>
 </html>