/* Heights relative to the screen: svh where supported. On an iPhone plain vh
   is the height with Safari's toolbars hidden, so an 88vh box is taller than
   what is visible while they show - centred overlays then lost their header
   off the top edge. */
var vvh=n=>(window.CSS&&CSS.supports&&CSS.supports('height','1svh'))?n+'svh':n+'vh';
function Header({active,favoritesCount,onFavoritesClick}){
const links=['Neuwagen','Gebrauchtwagen','Werkstatt & Service','Finanzierung','Kontakt'];
return <header className="mkt-header" style={{background:'#141414',color:'#fff',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
<div style={{maxWidth:'var(--container-max,1280px)',margin:'0 auto',padding:'0 24px',display:'flex',alignItems:'center',justifyContent:'space-between',height:64,width:'100%',flexWrap:'wrap'}}>
<div className="mkt-header-title" style={{fontFamily:'Georgia,serif',fontSize:19,fontWeight:700,letterSpacing:'.01em'}}>Autohaus Voitel</div>
<nav className="mkt-header-nav" style={{display:'flex',gap:28,fontSize:13.5,fontFamily:'var(--font-body)'}}>
{links.map(l=><a key={l} href="#" style={{color:l===active?'#fff':'rgba(255,255,255,.65)',textDecoration:'none',fontWeight:l===active?700:500,borderBottom:l===active?'2px solid var(--brand-600,#c8102e)':'2px solid transparent',paddingBottom:20,marginTop:20}}>{l}</a>)}
</nav>
<button onClick={onFavoritesClick} style={{position:'relative',background:'none',border:'1px solid rgba(255,255,255,.25)',borderRadius:999,padding:'8px 14px',color:'#fff',fontSize:13,fontWeight:600,cursor:'pointer',display:'flex',alignItems:'center',gap:6,fontFamily:'var(--font-body)'}}>
♥ Merkliste{favoritesCount>0?' ('+favoritesCount+')':''}
</button>
</div>
</header>;
}

/* Shared Werkstatt-Termin modal.
   Markup copied verbatim from werkstatt-termin.html's #appointment-modal.
   NOTE: that modal is inline-duplicated on all 11 static pages; this is the
   single copy the React pages share. See PATCHES.md. */
function AppointmentModal({open,onClose}){
const [sent,setSent]=React.useState(false);
React.useEffect(function(){
  if(open){document.body.classList.add('modal-open');}
  else{document.body.classList.remove('modal-open');setSent(false);}
},[open]);
React.useEffect(function(){
  if(!open)return;
  function onKey(e){if(e.key==='Escape')onClose&&onClose();}
  document.addEventListener('keydown',onKey);
  return function(){document.removeEventListener('keydown',onKey);};
},[open,onClose]);
return <div className={"modal-overlay"+(open?" open":"")} id="appointment-modal"
  onClick={e=>{if(e.target.id==='appointment-modal')onClose&&onClose();}}
  ref={el=>{ if(el){ el.querySelectorAll('[data-close-modal]').forEach(function(b){ b.onclick=function(){onClose&&onClose();}; });
    var snd=el.querySelector('#appointment-send'); if(snd) snd.onclick=function(){setSent(true);};
    var fv=el.querySelector('#appointment-form-view'); if(fv) fv.style.display=sent?'none':'';
    var th=el.querySelector('#appointment-thanks'); if(th) th.classList.toggle('show',sent); } }}>
<div className="modal-card" data-lenis-prevent>
<div id="appointment-form-view">
<div className="modal-head">
<div className="modal-head-left">
<div className="modal-icon"><img src="https://unpkg.com/lucide-static@0.469.0/icons/calendar.svg" alt=""/></div>
<div><h3 className="modal-title">Wunschtermin anfragen</h3><p className="modal-desc">Wählen Sie Ihren gewünschten Termin — wir bestätigen kurzfristig.</p></div>
</div>
<button className="modal-close" data-close-modal>✕</button>
</div>
<div className="modal-grid">
<div className="modal-field"><label>Gewünschter Termin *</label><input type="date" required/></div>
<div className="modal-field"><label>Gewünschte Uhrzeit *</label><input type="time" required/></div>
<div className="modal-field full"><label>Ihr Name *</label><input type="text" placeholder="Vor- und Nachname" required/></div>
<div className="modal-field"><label>Ihre E-Mail *</label><input type="email" placeholder="sie@beispiel.de" required/></div>
<div className="modal-field"><label>Ihre Telefonnummer (optional)</label><input type="tel" placeholder="+49 …"/></div>
<div className="modal-field full"><label>Ihre Nachricht *</label><textarea rows="3" placeholder="Worum geht es? z.B. Inspektion, Reifenwechsel…" required style={{'border':'1px solid #e2ddd2','background':'#faf9f6','padding':'11px 12px','fontSize':'14px','borderRadius':'10px','fontFamily':'inherit','color':'#1a1a1a','resize':'vertical','width':'100%'}}></textarea></div>
</div>
<div className="modal-footer">
<button className="modal-btn modal-btn-secondary" data-close-modal>Abbrechen</button>
<button className="modal-btn modal-btn-primary" id="appointment-send">Absenden</button>
</div>
</div>
<div className="modal-thanks" id="appointment-thanks">
<div className="modal-thanks-icon"><img src="https://unpkg.com/lucide-static@0.469.0/icons/circle-check.svg" alt=""/></div>
<h3>Danke — Ihre Anfrage ist bei uns eingegangen.</h3>
<p>Wir bestätigen Ihren Termin in Kürze per E-Mail oder Telefon.</p>
<div className="modal-thanks-ctas">
<button className="modal-btn modal-btn-primary" data-close-modal>Schließen</button>
</div>
</div>
</div>
</div>
}

function GNav({onFavoritesClick,favoritesCount}){
const [apptOpen,setApptOpen]=React.useState(false);
React.useEffect(function(){ window.voitelOpenAppointment=function(){setApptOpen(true);}; },[]);
React.useEffect(function(){
var root=document.querySelector('.gnav');
if(!root)return;
/* These pages used to pin .scrolled on mount, so the bar was permanently in
   its scrolled state and the CTAs were red from load - the one place on the
   site where they never made the switch. Same 40px rule every other
   non-homepage page uses (see service.html), so Werkstatt-Termin and
   Automarkt behave here exactly as they do there. */
function syncScrolled(){root.classList.toggle('scrolled',window.scrollY>40);}
window.addEventListener('scroll',syncScrolled,{passive:true});
syncScrolled();
var toggles=root.querySelectorAll('[data-dropdown-toggle]');
function bind(toggle){
var dd=toggle.nextElementSibling;
function openThis(){
toggles.forEach(function(t){if(t!==toggle)t.setAttribute('data-dropdown-toggle','')});
toggle.setAttribute('data-dropdown-toggle','open');
root.classList.add('is-open');
root.style.setProperty('--gnav-bg-height',(dd.offsetHeight+root.querySelector('.gnav-inner').offsetHeight)+'px');
}
function closeThis(){
toggle.setAttribute('data-dropdown-toggle','');
var anyOpen=Array.prototype.some.call(toggles,function(t){return t.getAttribute('data-dropdown-toggle')==='open'});
if(!anyOpen)root.classList.remove('is-open');
}
toggle.addEventListener('mouseenter',openThis);
dd.addEventListener('mouseleave',closeThis);
toggle.addEventListener('click',function(e){
if(window.innerWidth<=1024){
e.preventDefault();
if(toggle.getAttribute('data-dropdown-toggle')==='open')closeThis();else openThis();
}
});
}
toggles.forEach(bind);
var menuBtn=root.querySelector('[data-menu-button]');
if(menuBtn)menuBtn.addEventListener('click',function(){
root.dataset.menuStatus=root.dataset.menuStatus==='open'?'closed':'open';
});
},[]);
var dd=function(items){return <div className="gnav-dropdown"><div className="gnav-container"><ul className="gnav-dropdown__content">
{items.map(function(it){return <li key={it[1]} className="gnav-dropdown__content-li"><a href={it[2]||'#'} className="gnav-dropdown__link"><div className="gnav-dropdown__link-bg"><img src={it[0]} alt=""/><div className="gnav-dropdown__img-overlay"></div></div><div className="gnav-dropdown__link-inner"><span className="gnav-dropdown__link-label">{it[1]}</span></div></a></li>;})}
</ul></div></div>;};
var arrow=<svg width="10" viewBox="0 0 17 10" fill="none" className="gnav-link__dropdown-icon"><path d="M1.5 1.5L8.5 8.5L15.5 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
return <React.Fragment><nav className="gnav" data-menu-status="closed">
<div className="gnav-container">
<div className="gnav-bg"></div>
<div className="gnav-glass"><div className="gnav-glass__fill"></div><div className="gnav-glass__fill-burn"></div><div className="gnav-glass__highlight-soft"></div><div className="gnav-glass__highlight-strong"></div><div className="gnav-glass__edge-light"></div><div className="gnav-glass__edge-dark"></div><div className="gnav-glass__inner-glow"></div></div>
<div className="gnav-inner">
<a href="homepage.html" className="gnav-logo"><img src="assets/logo.svg" alt="Autohaus Voitel" style={{height:16,display:'block'}}/></a>
<div className="gnav-center">
<ul className="gnav-center__list">
<li><a href="homepage.html" className="gnav-link"><span className="gnav-link__label">Home</span></a></li>
<li><a href="automarkt.html" className="gnav-link"><span className="gnav-link__label">Automarkt</span></a></li>
<li>
<button data-dropdown-toggle className="gnav-link"><span className="gnav-link__label">Service</span>{arrow}</button>
{dd([['assets/photos/voitel-ford-blue-van-sm.jpg','Fahrzeuginstandhaltung','service.html'],['assets/photos/voitel-ford-red-van-sm.jpg','Unfallinstandsetzung','unfallinstandsetzung.html'],['assets/photos/voitel-ford-ranger-orange-sm.jpg','Zubehör & Umbauten','zubehoer-umbauten.html'],['assets/photos/voitel-ford-blue-van-sm.jpg','Finanzierung & Leasing','finanzierung-leasing.html'],['assets/photos/voitel-ford-red-van-sm.jpg','Versicherung','versicherung.html'],['assets/photos/voitel-mustang-forest-sm.jpg','Werkstatt-Termin','werkstatt-termin.html']])}
</li>
<li>
<button data-dropdown-toggle className="gnav-link"><span className="gnav-link__label">Kontakt</span>{arrow}</button>
{dd([['assets/photos/voitel-ford-red-van-sm.jpg','Ansprechpartner','ansprechpartner.html'],['assets/photos/voitel-ford-blue-van-sm.jpg','Öffnungszeiten & Kontakt','homepage.html#kontakt']])}
</li>
<li>
<button data-dropdown-toggle className="gnav-link"><span className="gnav-link__label">Über uns</span>{arrow}</button>
{dd([['assets/photos/voitel-ford-ranger-orange-sm.jpg','Unternehmensgeschichte','unternehmensgeschichte.html'],['assets/photos/voitel-ford-red-van-sm.jpg','Karriere','jobs.html'],['assets/photos/voitel-ford-blue-van-sm.jpg','Region Plauen','region-plauen.html'],['assets/photos/voitel-mustang-forest-sm.jpg','Region Vogtland','region-vogtland.html']])}
</li>
</ul>
<div className="gnav-center-extra">
<button type="button" onClick={()=>setApptOpen(true)} className="gnav-cta" style={{border:'none',cursor:'pointer'}}>Werkstatt-Termin</button>
<div className="gnav-center-icons">
<a href="tel:+49374155770" className="gnav-icon-link" aria-label="Anrufen" data-tip="Anrufen"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/phone.svg"/></a>

<a href="mailto:info@auto-voitel.de" className="gnav-icon-link" aria-label="E-Mail schreiben" data-tip="E-Mail"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/mail.svg"/></a>
<a href="https://maps.google.com/?q=Alleestra%C3%9Fe+6,+08525+Plauen" target="_blank" rel="noopener" className="gnav-icon-link" aria-label="Auf Karte anzeigen" data-tip="Anfahrt"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/map-pin.svg"/></a>
<a href="admin.html" className="gnav-icon-link" aria-label="Mitarbeiter-Login" data-tip="Login"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/circle-user-round.svg"/></a>
</div>
</div>
</div>
<div className="gnav-end">
<button type="button" onClick={()=>setApptOpen(true)} className="gnav-cta" style={{border:'none',cursor:'pointer'}}>Werkstatt-Termin</button>
{onFavoritesClick&&<button onClick={onFavoritesClick} aria-label="Merkliste" style={{background:'none',border:'none',cursor:'pointer',position:'relative',display:'flex'}}><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/heart.svg"/>{favoritesCount>0&&<span style={{position:'absolute',top:-6,right:-6,background:'var(--brand-600)',color:'#fff',fontSize:10,fontWeight:700,borderRadius:'50%',width:16,height:16,display:'flex',alignItems:'center',justifyContent:'center'}}>{favoritesCount}</span>}</button>}
{onFavoritesClick&&favoritesCount>0&&<button onClick={onFavoritesClick} aria-label="Merkliste" className="gnav-fav-mobile" style={{background:'none',border:'none',cursor:'pointer',position:'relative'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/heart.svg" style={{width:20,height:20}}/><span style={{position:'absolute',top:-5,right:-6,background:'var(--brand-600)',color:'#fff',fontSize:10,fontWeight:700,borderRadius:'50%',width:16,height:16,display:'flex',alignItems:'center',justifyContent:'center'}}>{favoritesCount}</span></button>}
<a href="tel:+49374155770" className="gnav-icon-link" aria-label="Anrufen" data-tip="Anrufen"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/phone.svg"/></a>

<a href="mailto:info@auto-voitel.de" className="gnav-icon-link" aria-label="E-Mail schreiben" data-tip="E-Mail"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/mail.svg"/></a>
<a href="https://maps.google.com/?q=Alleestra%C3%9Fe+6,+08525+Plauen" target="_blank" rel="noopener" className="gnav-icon-link" aria-label="Auf Karte anzeigen" data-tip="Anfahrt"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/map-pin.svg"/></a>
<a href="admin.html" className="gnav-icon-link" aria-label="Mitarbeiter-Login" data-tip="Login"><img className="gnav-icon" src="https://unpkg.com/lucide-static@0.469.0/icons/circle-user-round.svg"/></a>
<button data-menu-button aria-label="Menü umschalten" className="gnav-menu-button"><div className="gnav-menu-button__line"></div><div className="gnav-menu-button__line"></div></button>
</div>
</div>
</div>
</nav>
<AppointmentModal open={apptOpen} onClose={()=>setApptOpen(false)}/></React.Fragment>;
}
function Footer(){
var css=".footer-col h5{font-size:12px;font-weight:700;letter-spacing:.08em;color:#8a8a8a;margin-bottom:16px;text-transform:uppercase}.footer-col a{display:block;font-size:14px;color:#d4d2ce;text-decoration:none;margin-bottom:11px}.footer-col a:hover{color:var(--brand-600,#c8102e)}.footer-outer{background:#fff;padding:28px}.footer2{background:var(--brand-600,#c8102e);border-radius:36px;border-top-left-radius:260px;position:relative;overflow:hidden;padding:56px 56px 0}.footer2-top{display:flex;gap:48px;flex-wrap:wrap;padding-bottom:40px}.footer2-intro{flex:1.3;min-width:260px;padding-top:12px;padding-left:clamp(0px,10vw,200px)}.footer2-tagline{font-family:var(--font-display),Georgia,serif;font-size:26px;font-weight:500;color:#fff;line-height:1.25;margin-bottom:18px;max-width:380px}.footer2-copy-row{display:flex;align-items:center;gap:14px}.footer2-copy{font-size:13px;color:rgba(255,255,255,.75)}.footer2-top-btn{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}.footer2-top-btn:hover{background:#fff;color:var(--brand-600,#c8102e)}.footer2-cols{display:flex;gap:48px;flex:2;flex-wrap:wrap}.footer2-cols .footer-col h5{color:rgba(255,255,255,.7)}.footer2-cols .footer-col a{color:#fff;opacity:.92}.footer2-cols .footer-col a:hover{opacity:1;color:#fff;text-decoration:underline}.footer2-newsletter{flex:1.1;min-width:240px}.footer2-newsletter h5{font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-bottom:14px;text-transform:uppercase}.footer2-subscribe{display:flex;background:#fff;border-radius:999px;padding:5px;gap:6px}.footer2-subscribe input{flex:1;border:none;background:none;padding:10px 14px;font-size:13.5px;outline:none;min-width:0}.footer2-subscribe button{border:none;background:#1a1a1a;color:#fff;border-radius:999px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}.footer2-subscribe button:hover{background:#000}.footer2-social{display:flex;gap:12px}.footer2-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff}.footer2-social a:hover{background:#fff;color:var(--brand-600,#c8102e)}.footer2-social svg{width:18px;height:18px;fill:currentColor}.footer2-legal{display:flex;flex-wrap:wrap;gap:24px;padding:22px 0;border-top:1px solid rgba(255,255,255,.2)}.footer2-legal a{font-size:13px;color:rgba(255,255,255,.8);text-decoration:none}.footer2-legal a:hover{color:#fff;text-decoration:underline}.footer2-wordmark{padding:20px 40px 0;line-height:0;text-align:right}.footer2-wordmark img{width:55%;display:inline-block}@media (max-width:1024px){.footer-outer{background:#fff}.footer2{border-radius:160px 160px 32px 32px;padding:40px 28px 0;display:flex;flex-direction:column}.footer2-wordmark{order:-1}.footer2-top{order:1}.footer2-legal{order:2}.footer2-cols{order:-1}.footer2-newsletter{order:0}.footer2-intro{order:1;padding-left:0;text-align:center}.footer2-tagline{font-size:17px;max-width:none}.footer2-copy-row{justify-content:center}.footer2-top{flex-direction:column;gap:32px}.footer2-cols{flex-direction:column;gap:28px;text-align:center}.footer2-newsletter{text-align:center}.footer2-subscribe{max-width:360px;margin:0 auto}.footer2-social{justify-content:center}.footer2-legal{justify-content:center}.footer2-wordmark{padding:16px 16px 32px;text-align:center}.footer2-wordmark img{width:92%}.footer-outer{padding:20px}}";
return <React.Fragment>
<style>{css}</style>
<div className="footer-outer">
<div className="footer2">
<div className="footer2-top">
<div className="footer2-intro">
<div className="footer2-tagline">Ihr zuverlässiger Ford- und Mitsubishi Vertragspartner für Plauen und das Vogtland — seit 1975.</div>
<div className="footer2-copy-row">
<div className="footer2-copy">© 2026 Autohaus Voitel GmbH.</div>
<button className="footer2-top-btn" aria-label="Nach oben" onClick={function(){window.scrollTo({top:0,behavior:'smooth'})}}><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg></button>
</div>
<div className="footer2-legal">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
<div className="footer2-cols">
<div className="footer-col">
<h5>Schnellzugriff</h5>
<a href="homepage.html">Home</a>
<a href="automarkt.html">Automarkt</a>
<a href="homepage.html#fahrzeug-in-zahlung" data-open-tradein="">Fahrzeug in Zahlung geben</a>
<a href="homepage.html#suche-speichern" data-open-savedsearch="">Suche speichern</a>
<a href="https://www.google.com/maps/dir/?api=1&amp;destination=Autohaus+Voitel,+Alleestra%C3%9Fe+6,+08525+Plauen" target="_blank" rel="noopener">Anfahrt</a>
</div>
<div className="footer-col">
<h5>Services</h5>
<a href="service.html">Fahrzeuginstandhaltung</a>
<a href="unfallinstandsetzung.html">Unfallinstandsetzung</a>
<a href="zubehoer-umbauten.html">Zubehör &amp; Umbauten</a>
<a href="finanzierung-leasing.html">Finanzierung &amp; Leasing</a>
<a href="versicherung.html">Versicherung</a>
<a href="werkstatt-termin.html">Werkstatt-Termin</a>
</div>
<div className="footer-col">
<h5>Über uns</h5>
<a href="unternehmensgeschichte.html">Unternehmensgeschichte</a>
<a href="jobs.html">Karriere</a>
<a href="region-plauen.html">Region Plauen</a>
<a href="region-vogtland.html">Region Vogtland</a>
</div>
</div>
<div className="footer2-newsletter">
<h5>Neuigkeiten von Voitel</h5>
<form className="footer2-subscribe" onSubmit={function(e){e.preventDefault()}}><input type="email" placeholder="E-Mail-Adresse" required/><button type="submit">Abonnieren</button></form>
<h5 style={{marginTop:32}}>Folgen Sie uns</h5>
<div className="footer2-social icon-btns">
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.5 9.9v-7H7.9V12h2.6V9.8c0-2.6 1.5-4 3.8-4 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.3 0-1.7.8-1.7 1.6V12h2.9l-.5 2.9h-2.4v7A10 10 0 0 0 22 12"/></svg></a>
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2c2.7 0 3.1 0 4.1.05 1.1.05 1.8.2 2.4.45.7.27 1.2.6 1.7 1.1.5.5.85 1 1.1 1.7.25.6.4 1.3.45 2.4.05 1 .05 1.4.05 4.1s0 3.1-.05 4.1c-.05 1.1-.2 1.8-.45 2.4a4.9 4.9 0 0 1-1.1 1.7c-.5.5-1 .85-1.7 1.1-.6.25-1.3.4-2.4.45-1 .05-1.4.05-4.1.05s-3.1 0-4.1-.05c-1.1-.05-1.8-.2-2.4-.45a4.9 4.9 0 0 1-1.7-1.1 4.9 4.9 0 0 1-1.1-1.7c-.25-.6-.4-1.3-.45-2.4C2 15.1 2 14.7 2 12s0-3.1.05-4.1c.05-1.1.2-1.8.45-2.4.27-.7.6-1.2 1.1-1.7.5-.5 1-.85 1.7-1.1.6-.25 1.3-.4 2.4-.45C8.9 2 9.3 2 12 2m0 1.8c-2.66 0-2.98 0-4.03.05-.9.04-1.38.19-1.7.31-.43.17-.73.37-1.05.69-.32.32-.52.62-.69 1.05-.12.32-.27.8-.31 1.7C4.17 8.85 4.17 9.17 4.17 12s0 2.98.05 4.03c.04.9.19 1.38.31 1.7.17.43.37.73.69 1.05.32.32.62.52 1.05.69.32.12.8.27 1.7.31 1.05.05 1.37.05 4.03.05s2.98 0 4.03-.05c.9-.04 1.38-.19 1.7-.31.43-.17.73-.37 1.05-.69.32-.32.52-.62.69-1.05.12-.32.27-.8.31-1.7.05-1.05.05-1.37.05-4.03s0-2.98-.05-4.03c-.04-.9-.19-1.38-.31-1.7a2.8 2.8 0 0 0-.69-1.05 2.8 2.8 0 0 0-1.05-.69c-.32-.12-.8-.27-1.7-.31C14.98 3.8 14.66 3.8 12 3.8m0 3.05a5.15 5.15 0 1 1 0 10.3 5.15 5.15 0 0 1 0-10.3m0 1.8a3.35 3.35 0 1 0 0 6.7 3.35 3.35 0 0 0 0-6.7m5.4-3.15a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4"/></svg></a>
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M21.6 7.2s-.2-1.5-.85-2.15c-.8-.85-1.7-.85-2.1-.9C15.9 4 12 4 12 4s-3.9 0-6.65.15c-.4.05-1.3.05-2.1.9C2.6 5.7 2.4 7.2 2.4 7.2S2.25 9 2.25 10.75v1.5c0 1.75.15 3.55.15 3.55s.2 1.5.85 2.15c.8.85 1.85.8 2.3.9 1.7.15 6.45.2 6.45.2s3.9 0 6.65-.15c.4-.05 1.3-.05 2.1-.9.65-.65.85-2.15.85-2.15s.15-1.8.15-3.55v-1.5c0-1.75-.15-3.55-.15-3.55M9.95 14.9V8.6l5.9 3.15z"/></svg></a>
</div>
</div>
</div>
<div className="footer2-wordmark"><img src="assets/logos/voitel-logo-white.svg" alt="Autohaus Voitel"/></div>
</div>
</div>
</React.Fragment>;
}

/* Shared favourites panel — extracted verbatim from the copies that were
   inline in automarkt.html / automarkt-suche.html so all pages share one. */
function FavPanel({open,onClose,favorites,undoQueue,onOpenVehicle,onRemove,onUndo,onDownloadPdf}){
const {Button}=window.AutohausVoitelDesignSystem_21e950;
React.useEffect(function(){
if(!open)return;
function onDocClick(e){
if(e.target.closest('.gnav-fav-panel'))return;
if(e.target.closest('.gnav-fav-mobile'))return;
if(e.target.closest('[aria-label="Merkliste"]'))return;
onClose&&onClose();
}
document.addEventListener('mousedown',onDocClick);
return function(){document.removeEventListener('mousedown',onDocClick);};
},[open,onClose]);
if(!open)return null;
const favs=favorites||[];
const undo=undoQueue||[];
return <div className="gnav-fav-panel" style={{position:'fixed',top:64,right:'max(24px,calc((100vw - 1200px)/2 + 24px))',background:'#fff',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-m)',boxShadow:'var(--shadow-raised)',padding:18,width:300,zIndex:60,fontFamily:'var(--font-body)',maxHeight:vvh(70),overflowY:'auto'}}>
<div style={{fontWeight:700,fontSize:14,marginBottom:6}}>{favs.length===0?'Noch keine Fahrzeuge gemerkt':favs.length+' Fahrzeug'+(favs.length>1?'e':'')+' gemerkt'}</div>
{favs.length===0&&<div style={{fontSize:12,color:'var(--fg-muted)'}}>Tippen Sie auf das Herz bei einem Fahrzeug, um es hier zu sammeln.</div>}
{favs.length>0&&<div style={{display:'flex',flexDirection:'column',gap:10,margin:'12px 0'}}>
{favs.map(v=><div key={v.id} style={{display:'flex',alignItems:'center',gap:10,cursor:'pointer'}} onClick={()=>{onClose&&onClose();onOpenVehicle&&onOpenVehicle(v);}}>
<div style={{width:52,height:40,borderRadius:8,flex:'none',background:v.photos&&v.photos.length?`url(${v.photos[0]}) center/cover`:'var(--surface-sunken)'}}></div>
<div style={{flex:1,minWidth:0}}>
<div style={{fontSize:13,fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{v.brand} {v.model}</div>
<div style={{fontSize:12,color:'var(--fg-muted)'}}>{v.price!=null?(window.fmtPrice?window.fmtPrice(v.price):v.price+' €'):''}</div>
</div>
<button onClick={e=>{e.stopPropagation();onRemove&&onRemove(v);}} aria-label="Entfernen" style={{border:'none',background:'var(--surface-sunken)',borderRadius:'50%',width:24,height:24,flex:'none',cursor:'pointer',fontSize:13,color:'var(--fg-muted)',lineHeight:1}}>×</button>
</div>)}
</div>}
{undo.length>0&&<div style={{display:'flex',flexDirection:'column',gap:8,margin:'8px 0',paddingTop:8,borderTop:'1px solid var(--border-subtle)'}}>
{undo.map(u=><div key={u.vehicle.id}>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:8,fontSize:12,color:'var(--fg-muted)',marginBottom:6}}>
<span>{u.vehicle.brand} {u.vehicle.model} entfernt</span>
<button onClick={()=>onUndo&&onUndo(u.vehicle)} style={{border:'none',background:'none',color:'var(--fg-brand)',fontWeight:700,cursor:'pointer',fontSize:12}}>Rückgängig</button>
</div>
<div style={{height:2,background:'var(--border-subtle)',borderRadius:2,overflow:'hidden'}}>
<div className="undo-timer-bar" style={{height:'100%',background:'var(--brand-600)',width:'100%',transformOrigin:'left',animation:'undoTimerShrink 5s linear forwards'}}></div>
</div>
</div>)}
</div>}
{favs.length>0&&<Button variant="primary" size="s" style={{width:'100%'}} onClick={()=>{onDownloadPdf&&onDownloadPdf(favs);onClose&&onClose();}}>PDF herunterladen</Button>}
</div>;
}

Object.assign(window,{Header,Footer,GNav,FavPanel,AppointmentModal});