<?php
/**
* Template Name: Unfallankauf Landing Page (Full Width)
* Template Post Type: page
*/
// Disable WordPress header and footer to avoid theme conflicts
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unfallwagen Ankauf - Premium KFZ Ankauf</title>
<meta name="description" content="Wir kaufen hochwertige Premium-Unfallfahrzeuge nach professioneller Prüfung - BMW, Mercedes, Audi, Porsche">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #1e293b;
background: #f8fafc;
}
html {
scroll-behavior: smooth;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(to right, #1e293b, #0f172a);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
color: white;
}
.logo-icon {
width: 32px;
height: 32px;
color: #60a5fa;
}
.logo-text h1 {
font-size: 1.25rem;
font-weight: 700;
}
.logo-text p {
font-size: 0.75rem;
color: #93c5fd;
}
.lang-switcher {
display: flex;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
padding: 0.25rem;
border-radius: 0.5rem;
}
.lang-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-size: 0.875rem;
}
.lang-btn.active {
background: white;
color: #1e293b;
}
.lang-btn:not(.active) {
background: transparent;
color: white;
}
.lang-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.2);
}
/* Hero Section */
.hero {
padding: 8rem 1.5rem 5rem;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e3a8a 100%);
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 80px;
left: 40px;
width: 288px;
height: 288px;
background: #3b82f6;
border-radius: 50%;
filter: blur(80px);
opacity: 0.1;
}
.hero::after {
content: '';
position: absolute;
bottom: 80px;
right: 40px;
width: 384px;
height: 384px;
background: #64748b;
border-radius: 50%;
filter: blur(80px);
opacity: 0.1;
}
.hero-container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 10;
}
.badge {
display: inline-block;
background: #2563eb;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.hero h2 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.1;
}
.hero p {
font-size: 1.5rem;
color: #cbd5e1;
margin-bottom: 2.5rem;
line-height: 1.5;
}
.hero-subtitle {
font-size: 0.875rem;
color: #94a3b8;
margin-top: 1.5rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 1.5rem 2rem;
border: none;
border-radius: 0.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(to right, #f97316, #dc2626);
color: white;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border: 2px solid white;
color: white;
}
.btn-secondary:hover {
background: white;
color: #1e293b;
}
/* Features Section */
.features {
padding: 5rem 1.5rem;
background: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
color: #0f172a;
}
.section-subtitle {
text-align: center;
color: #64748b;
font-size: 1.125rem;
margin-bottom: 4rem;
max-width: 42rem;
margin-left: auto;
margin-right: auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-card {
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
padding: 2rem;
text-align: center;
transition: all 0.3s;
}
.feature-card:hover {
border-color: #60a5fa;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.feature-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.feature-card h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #0f172a;
}
.feature-card p {
color: #64748b;
line-height: 1.6;
}
/* How It Works */
.how-it-works {
padding: 5rem 1.5rem;
background: #f1f5f9;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.step-card {
background: white;
border-radius: 0.75rem;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.step-card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.step-number {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4);
}
.step-card h4 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #0f172a;
}
.step-card p {
color: #64748b;
line-height: 1.6;
}
/* Contact Form */
.contact-section {
padding: 5rem 1.5rem;
background: white;
}
.form-card {
max-width: 42rem;
margin: 0 auto;
background: white;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-header {
background: linear-gradient(to right, #f8fafc, #dbeafe);
padding: 2rem;
}
.form-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.5rem;
}
.form-header p {
color: #64748b;
}
.form-content {
padding: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #334155;
}
input, textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 0.375rem;
font-size: 1rem;
transition: border-color 0.2s;
}
input:focus, textarea:focus {
outline: none;
border-color: #3b82f6;
}
textarea {
resize: none;
min-height: 120px;
}
.upload-area {
border: 2px dashed #cbd5e1;
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s;
}
.upload-area:hover {
border-color: #3b82f6;
}
.upload-area input {
display: none;
}
.upload-icon {
width: 48px;
height: 48px;
margin: 0 auto 0.5rem;
color: #94a3b8;
}
.preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 1rem;
}
.preview-item {
position: relative;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid #cbd5e1;
}
.preview-item img {
width: 100%;
height: 96px;
object-fit: cover;
}
.remove-btn {
position: absolute;
top: 0.25rem;
right: 0.25rem;
background: #ef4444;
color: white;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.preview-item:hover .remove-btn {
opacity: 1;
}
.btn-submit {
width: 100%;
padding: 1.5rem;
background: linear-gradient(to right, #2563eb, #1e40af);
color: white;
border: none;
border-radius: 0.375rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(37, 99, 235, 0.3);
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Trust Section */
.trust-section {
padding: 4rem 1.5rem;
background: linear-gradient(to right, #2563eb, #1d4ed8);
color: white;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.trust-item-number {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.trust-item-text {
color: #bfdbfe;
}
/* Footer */
.footer {
background: #0f172a;
color: white;
padding: 3rem 1.5rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto 2rem;
}
.footer h4 {
color: #60a5fa;
margin-bottom: 1rem;
font-size: 1.125rem;
}
.footer p, .footer a {
color: #94a3b8;
line-height: 1.8;
}
.footer a {
text-decoration: none;
display: block;
transition: color 0.2s;
}
.footer a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #1e293b;
padding-top: 2rem;
text-align: center;
color: #94a3b8;
}
/* WhatsApp Button */
.whatsapp-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25d366;
color: white;
border: none;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
cursor: pointer;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
}
.whatsapp-btn:hover {
transform: scale(1.1);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Responsive */
@media (max-width: 768px) {
.hero h2 {
font-size: 2rem;
}
.hero p {
font-size: 1.125rem;
}
.section-title {
font-size: 1.875rem;
}
.cta-buttons {
flex-direction: column;
}
.btn {
width: 100%;
justify-content: center;
}
}
/* Utility Classes */
.hidden {
display: none !important;
}
.text-success {
color: #22c55e;
padding: 1rem;
background: #f0fdf4;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.text-error {
color: #ef4444;
padding: 1rem;
background: #fef2f2;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
/* WordPress Admin Bar Fix */
body.admin-bar .header {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .header {
top: 46px;
}
}
</style>
</head>
<body <?php body_class(); ?>>
<!-- Header -->
<header class="header">
<div class="header-container">
<div class="logo">
<svg class="logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
<div class="logo-text">
<h1 id="companyName">Unfallwagen Ankauf</h1>
<p id="tagline">Schnell & Fair</p>
</div>
</div>
<div class="lang-switcher">
<button class="lang-btn active" onclick="switchLanguage('de')" id="btnDE">DE</button>
<button class="lang-btn" onclick="switchLanguage('pl')" id="btnPL">PL</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-container">
<div class="badge" id="badge">✓ Premium-Fahrzeuge • Deutschlandweit</div>
<h2 id="heroTitle">Hochwertige Unfallwagen verkaufen</h2>
<p id="heroSubtitle">Wir kaufen ausgewählte Premium-Unfallfahrzeuge nach professioneller Prüfung – faire Preise und schnelle Abwicklung</p>
<div class="cta-buttons">
<a href="#contact-form" class="btn btn-primary">
<span id="heroCTA">Jetzt Fahrzeug prüfen lassen</span>
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
<a href="tel:+48 502 556 100" class="btn btn-secondary">
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
+48 502 556 100
</a>
</div>
<p class="hero-subtitle" id="heroSubtext">Wir spezialisieren uns auf BMW, Mercedes, Audi, Porsche, VW und weitere Premium-Marken</p>
</div>
</section>
<!-- Features Section -->
<section class="features">
<div class="container">
<h3 class="section-title" id="featuresTitle">Warum Unfallwagen Ankauf?</h3>
<p class="section-subtitle" id="featuresSubtitle">Spezialisiert auf hochwertige Markenfahrzeuge mit über 15 Jahren Erfahrung</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon" style="background: #dbeafe;">
<svg width="32" height="32" fill="none" stroke="#2563eb" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h4 id="feature1Title">Professionelle Prüfung</h4>
<p id="feature1Desc">Unsere Experten prüfen Ihr Fahrzeug vor Ort und erstellen eine detaillierte Bewertung</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #dcfce7;">
<svg width="32" height="32" fill="none" stroke="#16a34a" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h4 id="feature2Title">Kostenlose Begutachtung</h4>
<p id="feature2Desc">Wir begutachten Ihr Fahrzeug deutschlandweit kostenlos – unverbindlich und transparent</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #fed7aa;">
<svg width="32" height="32" fill="none" stroke="#ea580c" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
</div>
<h4 id="feature3Title">Barzahlung vor Ort</h4>
<p id="feature3Desc">Bei Zusage erhalten Sie Ihr Geld sofort in bar – sicher und zuverlässig</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #f1f5f9;">
<svg width="32" height="32" fill="none" stroke="#475569" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h4 id="feature4Title">Premium-Fahrzeuge</h4>
<p id="feature4Desc">Wir kaufen ausgewählte hochwertige Markenfahrzeuge – BMW, Mercedes, Audi, Porsche etc.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="how-it-works">
<div class="container">
<h3 class="section-title" id="howTitle">So einfach geht's</h3>
<div class="steps-grid">
<div class="step-card">
<div class="step-number">1</div>
<h4 id="step1Title">Anfrage senden</h4>
<p id="step1Desc">Senden Sie uns Details zu Ihrem Premium-Unfallfahrzeug</p>
</div>
<div class="step-card">
<div class="step-number">2</div>
<h4 id="step2Title">Prüfung & Bewertung</h4>
<p id="step2Desc">Unsere Experten prüfen Ihr Fahrzeug und erstellen ein faires Angebot</p>
</div>
<div class="step-card">
<div class="step-number">3</div>
<h4 id="step3Title">Abholung & Zahlung</h4>
<p id="step3Desc">Bei Zusage: Kostenlose Abholung und sofortige Barzahlung</p>
</div>
</div>
</div>
</section>
<!-- Contact Form -->
<section id="contact-form" class="contact-section">
<div class="container">
<div class="form-card">
<div class="form-header">
<h3 id="formTitle">Fahrzeugprüfung anfragen</h3>
<p id="formSubtitle">Füllen Sie das Formular aus – wir prüfen, ob Ihr Fahrzeug unseren Qualitätsanforderungen entspricht</p>
</div>
<div class="form-content">
<div id="formMessage" class="hidden"></div>
<form id="contactForm">
<div class="form-row">
<div class="form-group">
<label for="name"><span id="labelName">Ihr Name</span> *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email"><span id="labelEmail">E-Mail Adresse</span> *</label>
<input type="email" id="email" name="email" required>
</div>
</div>
<div class="form-group">
<label for="phone"><span id="labelPhone">Telefonnummer</span> *</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="brand"><span id="labelBrand">Fahrzeugmarke</span> *</label>
<input type="text" id="brand" name="brand" placeholder="z.B. BMW, Audi" required>
</div>
<div class="form-group">
<label for="model"><span id="labelModel">Modell</span> *</label>
<input type="text" id="model" name="model" placeholder="z.B. 3er, A4" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="year"><span id="labelYear">Baujahr</span> *</label>
<input type="number" id="year" name="year" placeholder="2020" required>
</div>
<div class="form-group">
<label for="mileage"><span id="labelMileage">Kilometerstand</span> *</label>
<input type="number" id="mileage" name="mileage" placeholder="50000 km" required>
</div>
</div>
<div class="form-group">
<label for="damage"><span id="labelDamage">Schadenbeschreibung</span> *</label>
<textarea id="damage" name="damage" placeholder="Beschreiben Sie den Unfallschaden..." required></textarea>
</div>
<div class="form-group">
<label><span id="labelPhotos">Fotos hochladen</span></label>
<div class="upload-area" onclick="document.getElementById('photos').click()">
<svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
</svg>
<p id="uploadText">Laden Sie bis zu 5 Fotos hoch (max. 5MB pro Foto)</p>
<input type="file" id="photos" accept="image/*" multiple onchange="handleFileSelect(event)">
</div>
<div id="previewContainer" class="preview-grid"></div>
</div>
<button type="submit" class="btn-submit" id="submitBtn">
<span id="submitText">Prüfung anfragen</span>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Trust Section -->
<section class="trust-section">
<div class="container">
<div class="trust-grid">
<div>
<div class="trust-item-number">15+</div>
<div class="trust-item-text" id="trust1">Jahre Erfahrung</div>
</div>
<div>
<div class="trust-item-number">1000+</div>
<div class="trust-item-text" id="trust2">Zufriedene Kunden</div>
</div>
<div>
<div class="trust-item-number">4.9 ★</div>
<div class="trust-item-text" id="trust3">Bewertung</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-grid">
<div>
<h4 id="footerAbout">Über uns</h4>
<p id="footerAboutText">Wir sind Ihr Spezialist für den Ankauf hochwertiger Unfallfahrzeuge in ganz Deutschland.</p>
</div>
<div>
<h4 id="footerContact">Kontakt</h4>
<a href="tel:+48502556100">📞 +49 176 12345678</a>
<a href="https://wa.me/48502556100" target="_blank">💬 WhatsApp</a>
</div>
<div>
<h4 id="footerLinks">Schnelllinks</h4>
<a href="#" id="linkAbout">Über uns</a>
<a href="#" id="linkServices">Leistungen</a>
<a href="#contact-form" id="linkContact">Kontakt</a>
<a href="#" id="linkPrivacy">Datenschutz</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 <span id="footerCompany">Unfallwagen Ankauf</span>. <span id="footerRights">Alle Rechte vorbehalten</span></p>
</div>
</footer>
<!-- WhatsApp Floating Button -->
<button class="whatsapp-btn" onclick="window.open('https://wa.me/48502556100', '_blank')" aria-label="WhatsApp">
<svg width="28" height="28" fill="currentColor" viewBox="0 0 24 24">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
</svg>
</button>
<script>
// Translations
const translations = {
de: {
companyName: 'Unfallwagen Ankauf',
tagline: 'Schnell & Fair',
badge: '✓ Premium-Fahrzeuge • Deutschlandweit',
heroTitle: 'Hochwertige Unfallwagen verkaufen',
heroSubtitle: 'Wir kaufen ausgewählte Premium-Unfallfahrzeuge nach professioneller Prüfung – faire Preise und schnelle Abwicklung',
heroCTA: 'Jetzt Fahrzeug prüfen lassen',
heroSubtext: 'Wir spezialisieren uns auf BMW, Mercedes, Audi, Porsche, VW und weitere Premium-Marken',
featuresTitle: 'Warum Unfallwagen Ankauf?',
featuresSubtitle: 'Spezialisiert auf hochwertige Markenfahrzeuge mit über 15 Jahren Erfahrung',
feature1Title: 'Professionelle Prüfung',
feature1Desc: 'Unsere Experten prüfen Ihr Fahrzeug vor Ort und erstellen eine detaillierte Bewertung',
feature2Title: 'Kostenlose Begutachtung',
feature2Desc: 'Wir begutachten Ihr Fahrzeug deutschlandweit kostenlos – unverbindlich und transparent',
feature3Title: 'Barzahlung vor Ort',
feature3Desc: 'Bei Zusage erhalten Sie Ihr Geld sofort in bar – sicher und zuverlässig',
feature4Title: 'Premium-Fahrzeuge',
feature4Desc: 'Wir kaufen ausgewählte hochwertige Markenfahrzeuge – BMW, Mercedes, Audi, Porsche etc.',
howTitle: 'So einfach geht\'s',
step1Title: 'Anfrage senden',
step1Desc: 'Senden Sie uns Details zu Ihrem Premium-Unfallfahrzeug',
step2Title: 'Prüfung & Bewertung',
step2Desc: 'Unsere Experten prüfen Ihr Fahrzeug und erstellen ein faires Angebot',
step3Title: 'Abholung & Zahlung',
step3Desc: 'Bei Zusage: Kostenlose Abholung und sofortige Barzahlung',
formTitle: 'Fahrzeugprüfung anfragen',
formSubtitle: 'Füllen Sie das Formular aus – wir prüfen, ob Ihr Fahrzeug unseren Qualitätsanforderungen entspricht',
labelName: 'Ihr Name',
labelEmail: 'E-Mail Adresse',
labelPhone: 'Telefonnummer',
labelBrand: 'Fahrzeugmarke',
labelModel: 'Modell',
labelYear: 'Baujahr',
labelMileage: 'Kilometerstand',
labelDamage: 'Schadenbeschreibung',
labelPhotos: 'Fotos hochladen',
uploadText: 'Laden Sie bis zu 5 Fotos hoch (max. 5MB pro Foto)',
submitText: 'Prüfung anfragen',
formSuccess: 'Vielen Dank! Wir prüfen Ihre Anfrage und melden uns innerhalb von 24 Stunden.',
formError: 'Fehler beim Senden. Bitte versuchen Sie es erneut.',
trust1: 'Jahre Erfahrung',
trust2: 'Zufriedene Kunden',
trust3: 'Bewertung',
footerAbout: 'Über uns',
footerAboutText: 'Wir sind Ihr Spezialist für den Ankauf hochwertiger Unfallfahrzeuge in ganz Deutschland.',
footerContact: 'Kontakt',
footerLinks: 'Schnelllinks',
linkAbout: 'Über uns',
linkServices: 'Leistungen',
linkContact: 'Kontakt',
linkPrivacy: 'Datenschutz',
footerCompany: 'Unfallwagen Ankauf',
footerRights: 'Alle Rechte vorbehalten'
},
pl: {
companyName: 'Skup Aut Powypadkowych',
tagline: 'Szybko i Uczciwie',
badge: '✓ Pojazdy Premium • W całych Niemczech',
heroTitle: 'Sprzedaj wysokiej klasy auto powypadkowe',
heroSubtitle: 'Kupujemy wybrane auta powypadkowe klasy premium po profesjonalnej ocenie – uczciwe ceny i szybka realizacja',
heroCTA: 'Zgłoś auto do oceny',
heroSubtext: 'Specjalizujemy się w BMW, Mercedes, Audi, Porsche, VW i innych markach premium',
featuresTitle: 'Dlaczego my?',
featuresSubtitle: 'Specjalizacja w wysokiej klasy pojazdach markowych z ponad 15-letnim doświadczeniem',
feature1Title: 'Profesjonalna ocena',
feature1Desc: 'Nasi eksperci oceniają Twój pojazd na miejscu i tworzą szczegółową wycenę',
feature2Title: 'Bezpłatna inspekcja',
feature2Desc: 'Oceniamy Twój pojazd w całych Niemczech bezpłatnie – niezobowiązująco i transparentnie',
feature3Title: 'Płatność gotówką',
feature3Desc: 'Przy akceptacji otrzymujesz pieniądze natychmiast gotówką – bezpiecznie i niezawodnie',
feature4Title: 'Pojazdy premium',
feature4Desc: 'Kupujemy wybrane wysokiej klasy pojazdy markowe – BMW, Mercedes, Audi, Porsche itp.',
howTitle: 'Jak to działa',
step1Title: 'Wyślij zapytanie',
step1Desc: 'Prześlij nam szczegóły dotyczące swojego auta premium',
step2Title: 'Ocena i wycena',
step2Desc: 'Nasi eksperci ocenią Twój pojazd i przedstawią uczciwą ofertę',
step3Title: 'Odbiór i płatność',
step3Desc: 'Po akceptacji: bezpłatny odbiór i natychmiastowa płatność gotówką',
formTitle: 'Zgłoś pojazd do oceny',
formSubtitle: 'Wypełnij formularz – sprawdzimy, czy Twój pojazd spełnia nasze wymagania jakościowe',
labelName: 'Imię i nazwisko',
labelEmail: 'Adres e-mail',
labelPhone: 'Numer telefonu',
labelBrand: 'Marka pojazdu',
labelModel: 'Model',
labelYear: 'Rok produkcji',
labelMileage: 'Przebieg',
labelDamage: 'Opis uszkodzeń',
labelPhotos: 'Prześlij zdjęcia',
uploadText: 'Prześlij do 5 zdjęć (max. 5MB na zdjęcie)',
submitText: 'Wyślij do oceny',
formSuccess: 'Dziękujemy! Sprawdzimy Twoje zgłoszenie i skontaktujemy się w ciągu 24 godzin.',
formError: 'Błąd podczas wysyłania. Spróbuj ponownie.',
trust1: 'Lat doświadczenia',
trust2: 'Zadowolonych klientów',
trust3: 'Ocena',
footerAbout: 'O nas',
footerAboutText: 'Jesteśmy specjalistami w skupie wysokiej klasy aut powypadkowych w całych Niemczech.',
footerContact: 'Kontakt',
footerLinks: 'Szybkie linki',
linkAbout: 'O nas',
linkServices: 'Usługi',
linkContact: 'Kontakt',
linkPrivacy: 'Polityka prywatności',
footerCompany: 'Skup Aut Powypadkowych',
footerRights: 'Wszelkie prawa zastrzeżone'
}
};
let currentLanguage = 'de';
let uploadedFiles = [];
// Language Switcher
function switchLanguage(lang) {
currentLanguage = lang;
document.getElementById('btnDE').classList.toggle('active', lang === 'de');
document.getElementById('btnPL').classList.toggle('active', lang === 'pl');
const t = translations[lang];
Object.keys(t).forEach(key => {
const element = document.getElementById(key);
if (element) {
element.textContent = t[key];
}
});
}
// File Upload Handler
function handleFileSelect(event) {
const files = Array.from(event.target.files);
if (uploadedFiles.length + files.length > 5) {
alert(currentLanguage === 'de' ? 'Maximal 5 Bilder erlaubt' : 'Maksymalnie 5 zdjęć');
return;
}
files.forEach(file => {
if (file.size > 5 * 1024 * 1024) {
alert(`${file.name}: ` + (currentLanguage === 'de' ? 'Datei zu groß (max 5MB)' : 'Plik za duży (max 5MB)'));
return;
}
const reader = new FileReader();
reader.onload = function(e) {
uploadedFiles.push({ file, preview: e.target.result });
renderPreview();
};
reader.readAsDataURL(file);
});
}
function renderPreview() {
const container = document.getElementById('previewContainer');
container.innerHTML = '';
uploadedFiles.forEach((item, index) => {
const div = document.createElement('div');
div.className = 'preview-item';
div.innerHTML = `
<img src="${item.preview}" alt="Preview ${index + 1}">
<button type="button" class="remove-btn" onclick="removeImage(${index})">×</button>
`;
container.appendChild(div);
});
}
function removeImage(index) {
uploadedFiles.splice(index, 1);
renderPreview();
}
// Form Submission
document.getElementById('contactForm').addEventListener('submit', async function(e) {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
const formMessage = document.getElementById('formMessage');
submitBtn.disabled = true;
submitBtn.textContent = currentLanguage === 'de' ? 'Wird gesendet...' : 'Wysyłanie...';
// Simulate form submission (replace with actual WordPress form handler)
setTimeout(() => {
formMessage.className = 'text-success';
formMessage.textContent = translations[currentLanguage].formSuccess;
formMessage.classList.remove('hidden');
// Reset form
document.getElementById('contactForm').reset();
uploadedFiles = [];
renderPreview();
submitBtn.disabled = false;
submitBtn.textContent = translations[currentLanguage].submitText;
setTimeout(() => {
formMessage.classList.add('hidden');
}, 5000);
}, 1500);
});
</script>
</body>
</html>