417 lines
23 KiB
HTML
417 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>MC Cars · Ferrari-Vermietung Steiermark</title>
|
||
<meta name="description" content="MC Cars · Premium Ferrari-Vermietung in der Steiermark. Faire Kaution, transparent, sofort startklar." />
|
||
<link rel="icon" type="image/svg+xml" href="/images/MC-Cars-Logo.svg" />
|
||
<link rel="apple-touch-icon" href="/images/MC-Cars-Logo.svg" />
|
||
<link rel="preload" as="image" href="/images/ferrari-main-car-mobile.jpg" fetchpriority="high" />
|
||
<link rel="preconnect" href="https://esm.sh" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<!-- Fonts loaded async: display=optional means they never block render -->
|
||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=optional" as="style" onload="this.onload=null;this.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=optional" rel="stylesheet" /></noscript>
|
||
<link rel="stylesheet" href="styles.css?v=2" />
|
||
<!-- 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, Ferrari mieten Graz" />
|
||
<meta name="theme-color" content="#1a1a1a" />
|
||
<meta name="language" content="German" />
|
||
<link rel="canonical" href="https://demo.lago.dev/" />
|
||
<link rel="alternate" hreflang="en" href="https://demo.lago.dev/en/" />
|
||
<link rel="alternate" hreflang="de" href="https://demo.lago.dev/" />
|
||
<link rel="alternate" hreflang="x-default" href="https://demo.lago.dev/" />
|
||
|
||
<!-- Open Graph Tags -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="MC Cars – Premium Ferrari-Vermietung Steiermark" />
|
||
<meta property="og:description" content="Fahren Sie einen Ferrari in der Steiermark. Faire Kaution, transparent, sofort startklar." />
|
||
<meta property="og:url" content="https://demo.lago.dev/" />
|
||
<meta property="og:site_name" content="MC Cars" />
|
||
<meta property="og:locale" content="de_AT" />
|
||
<meta property="og:image" content="https://demo.lago.dev/images/mc-cars-og-image.png" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
|
||
<!-- Twitter Card Tags -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="MC Cars – Premium Ferrari-Vermietung Steiermark" />
|
||
<meta name="twitter:description" content="Fahren Sie einen Ferrari in der Steiermark. Faire Kaution, transparent, sofort startklar." />
|
||
<meta name="twitter:image" content="https://demo.lago.dev/images/mc-cars-og-image.png" />
|
||
|
||
<!-- Structured Data (JSON-LD) -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"@id": "https://demo.lago.dev/#organization",
|
||
"name": "MC Cars GmbH",
|
||
"alternateName": "MC Cars",
|
||
"description": "Premium Ferrari-Vermietung in der Steiermark",
|
||
"url": "https://demo.lago.dev",
|
||
"logo": "https://demo.lago.dev/images/MC-Cars-Logo.svg",
|
||
"image": "https://demo.lago.dev/images/mc-cars-og-image.png",
|
||
"areaServed": {
|
||
"@type": "Place",
|
||
"name": "Steiermark, Österreich",
|
||
"geo": {
|
||
"@type": "GeoShape",
|
||
"box": "47.2 13.0 48.5 16.0"
|
||
}
|
||
},
|
||
"priceRange": "€€€",
|
||
"serviceType": "Ferrari-Vermietung",
|
||
"sameAs": [
|
||
"https://www.facebook.com/mc-cars",
|
||
"https://www.instagram.com/mc-cars"
|
||
]
|
||
}
|
||
</script>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "MC Cars GmbH",
|
||
"url": "https://demo.lago.dev",
|
||
"logo": "https://demo.lago.dev/images/MC-Cars-Logo.svg",
|
||
"description": "Premium Ferrari-Vermietung in Steiermark, Österreich",
|
||
"foundingDate": "2024",
|
||
"contactPoint": {
|
||
"@type": "ContactPoint",
|
||
"contactType": "Customer Support",
|
||
"availableLanguage": ["de", "en"]
|
||
}
|
||
}
|
||
</script>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"name": "Startseite",
|
||
"item": "https://demo.lago.dev/"
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<div class="shell">
|
||
<a class="logo" href="/" aria-label="MC Cars Startseite">
|
||
<img src="/images/MC-Cars-Logo.svg" alt="MC Cars" class="logo-icon" />
|
||
<span>MC Cars</span>
|
||
</a>
|
||
|
||
<button class="menu-toggle" aria-label="Menü">☰</button>
|
||
|
||
<nav class="main-nav" aria-label="Hauptnavigation">
|
||
<a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
|
||
<a href="#stimmen" data-i18n="navReviews">Stimmen</a>
|
||
<a href="#buchen" data-i18n="navBook">Buchen</a>
|
||
<a class="btn small" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
|
||
<button class="lang-toggle" type="button" aria-label="Sprache wechseln">EN</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero -->
|
||
<section class="hero" id="home">
|
||
<div class="shell">
|
||
<p class="eyebrow" data-i18n="heroEyebrow">MC Cars · Sportwagenvermietung</p>
|
||
<h1 data-i18n="heroTitle">Fahren auf höchstem Niveau.</h1>
|
||
<p class="lead" data-i18n="heroLead">Der Ferrari in der Steiermark. Faire Kaution, transparent, sofort startklar.</p>
|
||
|
||
<div class="hero-cta">
|
||
<a class="btn" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
|
||
</div>
|
||
|
||
<div class="hero-stats">
|
||
<div><strong data-i18n="statDeposit">Faire Kaution</strong><span>Fair Deposit</span></div>
|
||
<div><strong id="statCarsCount">–</strong><span id="statCarsLabel" data-i18n="statCar">Fahrzeug</span></div>
|
||
<div><strong>24/7</strong><span data-i18n="statSupport">Support</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Fleet -->
|
||
<section id="fahrzeuge">
|
||
<div class="shell">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2 data-i18n="fleetTitle">Handverlesen. Gepflegt. Startklar.</h2>
|
||
<p class="sub" data-i18n="fleetSub">Filtern Sie nach Marke und Preis. Klicken Sie für Details oder buchen Sie direkt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="filters" id="filters" onsubmit="return false;">
|
||
<label>
|
||
<span data-i18n="filterBrand">Marke</span>
|
||
<select id="brandFilter"><option value="all" data-i18n="all">Alle</option></select>
|
||
</label>
|
||
<label>
|
||
<span data-i18n="filterSort">Sortierung</span>
|
||
<select id="sortFilter">
|
||
<option value="sort_order">Empfehlung</option>
|
||
<option value="priceAsc" data-i18n="sortPriceAsc">Preis aufsteigend</option>
|
||
<option value="priceDesc" data-i18n="sortPriceDesc">Preis absteigend</option>
|
||
<option value="powerDesc" data-i18n="sortPowerDesc">Leistung absteigend</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
<span data-i18n="filterPrice">Max. Preis / Tag</span>
|
||
<input type="number" id="priceFilter" min="0" step="50" placeholder="1000" />
|
||
</label>
|
||
</form>
|
||
|
||
<div class="vehicle-grid" id="vehicleGrid"></div>
|
||
<p id="emptyState" style="display:none;color:var(--muted);text-align:center;padding:2rem 0;" data-i18n="noMatches">Keine Fahrzeuge gefunden.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Toast Notification -->
|
||
<div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>
|
||
<!-- Reviews -->
|
||
<section id="stimmen">
|
||
<div class="shell">
|
||
<div class="section-head">
|
||
<div>
|
||
<p class="eyebrow" data-i18n="reviewsEyebrow">Kundenmeinungen</p>
|
||
<h2 data-i18n="reviewsTitle">Erlebnisse, die bleiben.</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reviews-strip" id="reviewStrip" aria-live="polite"></div>
|
||
<div class="review-dots" id="reviewDots"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Booking BPF -->
|
||
<section id="buchen" style="background:var(--bg-elev);">
|
||
<div class="shell">
|
||
<div class="bpf-header">
|
||
<h2 data-i18n="bpfTitle">Jetzt buchen</h2>
|
||
<p class="sub" data-i18n="bpfSubtitle">Wähle dein Wunschfahrzeug, den Zeitraum und konfiguriere deine Buchung nach Wunsch.</p>
|
||
</div>
|
||
|
||
<!-- Step indicators -->
|
||
<div class="bpf-steps" id="bpfSteps">
|
||
<button class="bpf-step active" data-step="1"><span class="bpf-step-num">1</span> <span data-i18n="stepVehicleTime">Fahrzeug & Zeitraum</span></button>
|
||
<span class="bpf-step-arrow">›</span>
|
||
<button class="bpf-step" data-step="2"><span class="bpf-step-num">2</span> <span data-i18n="stepContact">Kontaktdaten</span></button>
|
||
<span class="bpf-step-arrow">›</span>
|
||
<button class="bpf-step" data-step="3"><span class="bpf-step-num">3</span> <span data-i18n="stepVerification">ID-Verifizierung</span></button>
|
||
</div>
|
||
|
||
<div class="bpf-layout">
|
||
<!-- Main form area -->
|
||
<div class="bpf-main">
|
||
<!-- Step 1: Vehicle & Time -->
|
||
<div class="bpf-panel" id="bpfStep1">
|
||
<h3 class="bpf-panel-title">🚗 <span data-i18n="stepVehicleTime">Fahrzeug & Zeitraum</span></h3>
|
||
|
||
<div class="bpf-field">
|
||
<label for="bpfCar" id="bpfCarLabel" data-i18n="bpfVehicle">Fahrzeug</label>
|
||
<select id="bpfCar" aria-labelledby="bpfCarLabel">
|
||
<option value="" data-i18n="bpfSelectVehicle">Fahrzeug wählen</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="bpf-field">
|
||
<label data-i18n="bpfDuration">Mietdauer</label>
|
||
<div class="bpf-duration-presets" id="bpfDurationPresets">
|
||
<button type="button" class="bpf-preset" data-preset="day">
|
||
<span class="bpf-preset-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M12 14h.01"></path><path d="M12 16h.01"></path></svg>
|
||
</span>
|
||
<span data-i18n="bpfPresetDay">1 Tag</span>
|
||
</button>
|
||
<button type="button" class="bpf-preset" data-preset="weekend">
|
||
<span class="bpf-preset-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M14 14h4v4h-4z"></path></svg>
|
||
</span>
|
||
<span data-i18n="bpfPresetWeekend">Wochenende</span>
|
||
</button>
|
||
<button type="button" class="bpf-preset" data-preset="custom">
|
||
<span class="bpf-preset-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M8 14h8"></path><path d="M8 18h8"></path></svg>
|
||
</span>
|
||
<span data-i18n="bpfPresetCustom">Individuell</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Day mode: single date picker -->
|
||
<div class="bpf-field bpf-date-day" id="bpfDateDay" style="display:none;">
|
||
<label data-i18n="bpfPickDate">Datum wählen</label>
|
||
<input type="date" id="bpfDayDate" />
|
||
</div>
|
||
|
||
<!-- Weekend mode: pick the Saturday -->
|
||
<div class="bpf-field bpf-date-weekend" id="bpfDateWeekend" style="display: none;">
|
||
<label data-i18n="bpfPickWeekend">Wochenende wählen (Samstag)</label>
|
||
<input type="date" id="bpfWeekendDate" />
|
||
<p class="bpf-weekend-def" data-i18n="bpfWeekendDef">Wochenende: Samstag 9:00 – Sonntag 20:00</p>
|
||
</div>
|
||
|
||
<!-- Custom mode: from/to date pickers -->
|
||
<div class="bpf-date-custom" id="bpfDateCustom" style="display:none;">
|
||
<div class="bpf-field-row">
|
||
<div class="bpf-field">
|
||
<label data-i18n="bpfStartDate">Startdatum</label>
|
||
<input type="date" id="bpfFrom" />
|
||
</div>
|
||
<div class="bpf-field">
|
||
<label data-i18n="bpfEndDate">Enddatum</label>
|
||
<input type="date" id="bpfTo" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bpf-nav">
|
||
<div></div>
|
||
<button class="btn" type="button" id="bpfNext1" data-i18n="bpfNext">Weiter</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 2: Contact -->
|
||
<div class="bpf-panel" id="bpfStep2" style="display:none;">
|
||
<h3 class="bpf-panel-title">📋 <span data-i18n="stepContact">Kontaktdaten</span></h3>
|
||
|
||
<div class="bpf-field">
|
||
<label data-i18n="fieldName">Name</label>
|
||
<input type="text" id="bpfName" required />
|
||
</div>
|
||
<div class="bpf-field-row">
|
||
<div class="bpf-field">
|
||
<label data-i18n="fieldEmail">E-Mail</label>
|
||
<input type="email" id="bpfEmail" required />
|
||
</div>
|
||
<div class="bpf-field">
|
||
<label data-i18n="fieldPhone">Telefon</label>
|
||
<input type="tel" id="bpfPhone" />
|
||
</div>
|
||
</div>
|
||
<div class="bpf-field">
|
||
<label data-i18n="fieldMessage">Nachricht</label>
|
||
<textarea id="bpfMessage" rows="3" data-i18n-placeholder="messagePlaceholder" placeholder="Wünsche, Uhrzeit, Anlass..."></textarea>
|
||
</div>
|
||
|
||
<div class="bpf-nav">
|
||
<button class="btn ghost" type="button" id="bpfBack2" data-i18n="bpfBack">Zurück</button>
|
||
<button class="btn" type="button" id="bpfNext2" data-i18n="bpfNext">Weiter</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 3: ID Verification -->
|
||
<div class="bpf-panel" id="bpfStep3" style="display:none;">
|
||
<h3 class="bpf-panel-title">🔐 <span data-i18n="stepVerification">ID-Verifizierung</span></h3>
|
||
<p class="muted" style="margin-bottom:1.5rem;">Bitte laden Sie einen gültigen Ausweis sowie einen aktuellen Lohnzettel / Gehaltsnachweis hoch.</p>
|
||
|
||
<div class="bpf-field">
|
||
<label data-i18n="bpfIdUpload">Ausweis / Führerschein *</label>
|
||
<div class="bpf-upload-box" id="uploadId">
|
||
<span class="bpf-upload-icon">⬆</span>
|
||
<span data-i18n="bpfClickUpload">Klicken zum Hochladen</span>
|
||
<span class="muted" data-i18n="bpfUploadHint">PDF, JPG, PNG (max. 10 MB)</span>
|
||
<input type="file" accept="image/*,.pdf" class="bpf-file-input" id="bpfFileId" />
|
||
</div>
|
||
<p class="bpf-file-name" id="bpfFileIdName"></p>
|
||
</div>
|
||
|
||
<div class="bpf-field">
|
||
<label data-i18n="bpfIncomeUpload">Lohnzettel / Gehaltsnachweis (optional)</label>
|
||
<div class="bpf-upload-box" id="uploadIncome">
|
||
<span class="bpf-upload-icon">⬆</span>
|
||
<span data-i18n="bpfClickUpload">Klicken zum Hochladen</span>
|
||
<span class="muted" data-i18n="bpfUploadHint">PDF, JPG, PNG (max. 10 MB)</span>
|
||
<input type="file" accept="image/*,.pdf" class="bpf-file-input" id="bpfFileIncome" />
|
||
</div>
|
||
<p class="bpf-file-name" id="bpfFileIncomeName"></p>
|
||
</div>
|
||
|
||
<div class="bpf-notice">
|
||
<span>ℹ</span>
|
||
<p data-i18n="bpfIdNotice">Ihre Dokumente werden vertraulich behandelt und dienen ausschließlich der Identitätsverifizierung.</p>
|
||
</div>
|
||
|
||
<div class="bpf-nav">
|
||
<button class="btn ghost" type="button" id="bpfBack3" data-i18n="bpfBack">Zurück</button>
|
||
<button class="btn" type="button" id="bpfSubmit" data-i18n="bpfSubmit">Anfrage absenden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Price sidebar -->
|
||
<aside class="bpf-sidebar" id="bpfSidebar">
|
||
<p class="bpf-sidebar-placeholder" data-i18n="bpfSelectForPrice">Wähle Fahrzeug und Datum für eine Preisübersicht</p>
|
||
<div class="bpf-sidebar-content" id="bpfSidebarContent" style="display:none;"></div>
|
||
</aside>
|
||
</div>
|
||
|
||
<p id="bookingFeedback" class="form-feedback" role="status"></p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer" id="kontakt">
|
||
<div class="shell">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<div class="logo" style="margin-bottom:0.8rem;">
|
||
<img src="/images/MC-Cars-Logo.svg" alt="MC Cars" class="logo-icon" style="width:2rem;height:2rem;" />
|
||
<span>MC Cars</span>
|
||
</div>
|
||
<p style="color:var(--muted);font-size:0.9rem;max-width:40ch;" data-i18n="footerTagline">Sportwagenvermietung in der Steiermark, Österreich.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 data-i18n="footerNav">Navigation</h4>
|
||
<a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
|
||
<a href="#buchen" data-i18n="navBook">Buchen</a>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 data-i18n="footerLegal">Rechtliches</h4>
|
||
<a href="/impressum" data-i18n="imprint">Impressum</a>
|
||
<a href="/agb" data-i18n="terms">AGB</a>
|
||
<a href="/mietbedingungen" data-i18n="rentalTerms">Mietbedingungen</a>
|
||
<a href="/datenschutz" data-i18n="privacy">Datenschutz</a>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 data-i18n="footerContact">Kontakt</h4>
|
||
<a href="mailto:hello@mc-cars.at">hello@mc-cars.at</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<span>© <span id="year"></span> MC Cars. <span data-i18n="copyright">Alle Rechte vorbehalten.</span></span>
|
||
<span>Made in Steiermark</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Vehicle details dialog -->
|
||
<dialog id="carDialog" aria-labelledby="dialogTitle">
|
||
<div class="dialog-head">
|
||
<h3 id="dialogTitle" style="margin:0;"></h3>
|
||
<button class="dialog-close" id="dialogClose" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="dialog-body" id="dialogBody"></div>
|
||
</dialog>
|
||
|
||
<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?v=3"></script>
|
||
</body>
|
||
</html>
|