Add MC Cars mark SVG logo to frontend images

frontend/app.js

@@ -159,7 +159,8 @@ function renderGrid() {
         const card = document.createElement("article");
         card.className = "vehicle-card";
         card.innerHTML = `
-            <div class="vehicle-photo" role="img" aria-label="${escapeAttr(v.brand)} ${escapeAttr(v.model)}" style="background-image:url('${escapeAttr(v.photo_url)}');">
+            <div class="vehicle-photo">
+                <img src="${escapeAttr(v.photo_url)}" 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">

frontend/images/mc-cars-mark.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" role="img" aria-label="MC Cars mark">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#c48a42"/>
+      <stop offset="100%" stop-color="#8a5a22"/>
+    </linearGradient>
+  </defs>
+  <rect x="24" y="24" width="464" height="464" rx="110" fill="url(#g)"/>
+  <text x="50%" y="57%" text-anchor="middle" dominant-baseline="middle"
+        font-family="Inter, Arial, sans-serif" font-size="220" font-weight="700" fill="#0b0c10">MC</text>
+</svg>

frontend/index.html

@@ -5,8 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>MC Cars · Sportwagenvermietung Steiermark</title>
     <meta name="description" content="MC Cars · Premium Sportwagen- und Luxusvermietung in der Steiermark. Faire Kaution, transparent, sofort startklar." />
-    <link rel="icon" type="image/png" href="/images/mc-cars-logo.png" />
-    <link rel="apple-touch-icon" href="/images/mc-cars-logo.png" />
+    <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://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" />
@@ -38,7 +39,7 @@
     <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>document.write('<scr'+'ipt src="config.js?v='+Date.now()+'"><\/scr'+'ipt>')</script>
+    <script src="config.js"></script>
     
     <!-- Structured Data (JSON-LD) -->
     <script type="application/ld+json">
@@ -103,7 +104,7 @@
     <header class="site-header">
         <div class="shell">
             <a class="logo" href="/" aria-label="MC Cars Startseite">
-                <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>
             </a>
 

frontend/styles.css

@@ -260,7 +260,7 @@ section { padding: 5rem 0; }
     inset: 0;
     background:
         linear-gradient(180deg, rgba(11,12,16,0.6) 0%, rgba(11,12,16,0.95) 100%),
-        var(--hero-bg, url('images/ferrari-main-car.png')) center / cover no-repeat;
+        var(--hero-bg, url('images/ferrari-main-car-mobile.jpg')) center / cover no-repeat;
     z-index: -1;
 }
 
@@ -392,10 +392,17 @@ select:focus, input:focus, textarea:focus {
 .vehicle-photo {
     position: relative;
     aspect-ratio: 16 / 10;
-    background: #0e1015 center / cover no-repeat;
+    background: #0e1015;
     overflow: hidden;
     transition: transform 0.4s ease;
 }
+
+.vehicle-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
 .vehicle-card:hover .vehicle-photo {
     transform: scale(1.02);
 }