/* 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 financingRate(price,months,downPct,ratePct){
const principal=price*(1-downPct/100);
const monthlyRate=ratePct/100/12;
if(monthlyRate===0)return principal/months;
const r=monthlyRate;
return (principal*r)/(1-Math.pow(1+r,-months));
}
function FinancingCalculator({price}){
const {Select,Input}=window.AutohausVoitelDesignSystem_21e950;
const [months,setMonths]=React.useState(48);
const [down,setDown]=React.useState(20);
const rate=financingRate(price,months,down,6.9);
return <div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:20,display:'flex',flexDirection:'column',gap:14}}>
<div style={{display:'flex',alignItems:'center',gap:8}}>
<img src="https://unpkg.com/lucide-static@0.469.0/icons/landmark.svg" width={18}/>
<span style={{fontWeight:700,fontSize:15}}>Santander Finanzierung</span>
<span style={{fontSize:10,fontWeight:700,color:'#fff',background:'var(--fg-muted)',borderRadius:999,padding:'2px 8px',textTransform:'uppercase',letterSpacing:'.04em'}}>Bald verfügbar</span>
</div>
<div style={{display:'flex',gap:12}}>
<Select label="Laufzeit" options={['24','36','48','60','72']} value={String(months)} onChange={e=>setMonths(Number(e.target.value))}/>
<Select label="Anzahlung" options={['0','10','20','30','40']} value={String(down)} onChange={e=>setDown(Number(e.target.value))}/>
</div>
<div style={{fontSize:12,color:'var(--fg-muted)'}}>Vorläufige Beispielrechnung — echte Konditionen folgen mit der Santander-Integration.</div>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,color:'var(--fg-brand)'}}>{rate.toLocaleString('de-DE',{maximumFractionDigits:0})} € / Monat</div>
</div>;
}
function BouncyTabs({tabs,active,onChange}){
const navRef=React.useRef(null);
const indicatorRef=React.useRef(null);
function place(){
const nav=navRef.current;if(!nav)return;
const btn=nav.querySelector('[data-active="true"]');
if(!btn||!indicatorRef.current)return;
indicatorRef.current.style.left=btn.offsetLeft+'px';
indicatorRef.current.style.width=btn.offsetWidth+'px';
indicatorRef.current.style.top=btn.offsetTop+'px';
indicatorRef.current.style.height=btn.offsetHeight+'px';
}
React.useEffect(()=>{place();window.addEventListener('resize',place);return()=>window.removeEventListener('resize',place);},[active]);
return <div style={{background:'#0000000f',borderRadius:'100em',display:'inline-flex',padding:6,position:'relative'}} ref={navRef}>
<div ref={indicatorRef} style={{position:'absolute',zIndex:2,pointerEvents:'none',background:'var(--fg-primary)',borderRadius:'100em',transition:'left .35s cubic-bezier(.2,.9,.2,1.3),width .35s cubic-bezier(.2,.9,.2,1.3)'}}></div>
{tabs.map(t=><button key={t} data-active={t===active} onClick={()=>onChange(t)} style={{zIndex:3,color:t===active?'#fff':'var(--fg-primary)',background:'none',border:'none',borderRadius:'100em',padding:'10px 20px',fontSize:13,fontWeight:600,fontFamily:'var(--font-body)',cursor:'pointer',transition:'color .3s ease',position:'relative'}}>{t}</button>)}
</div>;
}
function ExpandableList({items,initial=6}){
const [open,setOpen]=React.useState(false);
const shown=open?items:items.slice(0,initial);
return <div>
<div style={{display:'flex',flexDirection:'column',gap:6}}>
{shown.map((it,i)=><div key={i} style={{fontSize:13.5,color:'var(--fg-secondary)',display:'flex',gap:8}}><span style={{color:'var(--brand-600)'}}>✓</span>{it}</div>)}
</div>
{items.length>initial&&<button onClick={()=>setOpen(o=>!o)} style={{border:'none',background:'none',color:'var(--fg-brand)',fontWeight:600,fontSize:13,cursor:'pointer',padding:'8px 0 0'}}>{open?'Weniger anzeigen':`Mehr anzeigen (${items.length-initial})`}</button>}
</div>;
}
function AutomarketVehicleDetail({vehicle,onOpenVehicle,onReserve,onShare,onOpenTradeIn,favorites,onToggleFavorite}){
const {Badge,Button,IconButton,Tooltip}=window.AutohausVoitelDesignSystem_21e950;
const list=window.VOITEL_MARKET;
const idx=list.findIndex(v=>v.id===vehicle.id);
function goRelative(delta){const next=list[(idx+delta+list.length)%list.length];onOpenVehicle(next);}
const [tab,setTab]=React.useState('Technische Daten');
const [activePhoto,setActivePhoto]=React.useState(0);
const [lightbox,setLightbox]=React.useState(false);
if(!vehicle)return null;
const isFavorite=favorites&&!!favorites.find(x=>x.id===vehicle.id);
function photoCount(){return vehicle.photos?vehicle.photos.length:0;}
function prevPhoto(){setActivePhoto(i=>(i-1+photoCount())%photoCount());}
function nextPhoto(){setActivePhoto(i=>(i+1)%photoCount());}
const msg=encodeURIComponent(`Hallo, ich interessiere mich für den ${vehicle.brand} ${vehicle.model} mit dem Preisschild von ${window.fmtPrice(vehicle.price)}. ${location.href}`);
const reserveMsg=encodeURIComponent(`Bitte helft mir, dieses Fahrzeug zu reservieren, ich habe Interesse: ${vehicle.brand} ${vehicle.model} (${window.fmtPrice(vehicle.price)}). ${location.href}`);
const similar=window.VOITEL_MARKET.filter(v=>v.id!==vehicle.id&&(v.type===vehicle.type||v.brand===vehicle.brand)).slice(0,4);
return <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'32px 24px 80px',fontFamily:'var(--font-body)'}}>
<div className="avd-main-grid" style={{display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:40}}>
<div>
<div onClick={()=>vehicle.photos&&setLightbox(true)} className="avd-hero-img" style={{position:'relative',height:360,borderRadius:'var(--radius-l)',background:vehicle.photos?`url(${vehicle.photos[activePhoto]||vehicle.photos[0]}) center/cover`:vehicle.img.light,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--fg-muted)',cursor:vehicle.photos?'zoom-in':'default'}}>
{!vehicle.photos&&'Fahrzeugbild'}
{vehicle.photos&&vehicle.photos.length>1&&<React.Fragment>
<button onClick={e=>{e.stopPropagation();prevPhoto();}} aria-label="Vorheriges Bild" style={{position:'absolute',left:12,top:'50%',transform:'translateY(-50%)',width:36,height:36,borderRadius:'50%',border:'none',background:'rgba(255,255,255,.9)',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/chevron-left.svg" width={18}/></button>
<button onClick={e=>{e.stopPropagation();nextPhoto();}} aria-label="Nächstes Bild" style={{position:'absolute',right:12,top:'50%',transform:'translateY(-50%)',width:36,height:36,borderRadius:'50%',border:'none',background:'rgba(255,255,255,.9)',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/chevron-right.svg" width={18}/></button>
</React.Fragment>}
<div onClick={e=>e.stopPropagation()} style={{position:'absolute',top:12,right:12,display:'flex',gap:6}}>
<Tooltip label={isFavorite?'Von Favoriten entfernen':'Zu Favoriten hinzufügen'}><IconButton variant="solid" aria-label="Favorit" onClick={()=>onToggleFavorite&&onToggleFavorite(vehicle)} style={isFavorite?{background:'var(--brand-600)'}:{}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/heart.svg" width={16} style={{filter:'invert(1)'}}/>}/></Tooltip>
<Tooltip label="Link teilen"><IconButton variant="solid" aria-label="Teilen" onClick={onShare} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/share-2.svg" width={16} style={{filter:'invert(1)'}}/>}/></Tooltip>
</div>
</div>
{vehicle.photos&&<div style={{display:'flex',gap:8,marginTop:10,overflowX:'auto'}}>
{vehicle.photos.map((p,i)=><img key={i} src={p} onClick={()=>setActivePhoto(i)} style={{width:64,height:48,objectFit:'cover',borderRadius:6,cursor:'pointer',flexShrink:0,border:i===activePhoto?'2px solid var(--brand-600)':'2px solid transparent'}}/>)}
</div>}
<div style={{marginTop:24}}>
{vehicle.highlights&&<div className="avd-highlights" style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:10,marginBottom:22}}>
{vehicle.highlights.map((h,i)=><div key={i} style={{display:'flex',alignItems:'center',gap:9,background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:'10px 12px'}}>
<img src="https://unpkg.com/lucide-static@0.469.0/icons/badge-check.svg" width={16} style={{flexShrink:0,color:'var(--brand-600)'}}/>
<span style={{fontSize:13,fontWeight:600,color:'var(--fg-primary)'}}>{h}</span>
</div>)}
</div>}
<BouncyTabs tabs={['Technische Daten','Beschreibung','Ausstattung','Sonderausstattung','Weitere Ausstattungsmerkmale','Verbrauchsinformationen']} active={tab} onChange={setTab}/>
<div style={{padding:'20px 0',color:'var(--fg-secondary)',fontSize:15,lineHeight:1.7}}>
{tab==='Beschreibung'&&<div>
<p style={{margin:'0 0 20px'}}>{vehicle.desc}<br/><span style={{fontSize:12,color:'var(--fg-muted)'}}>Quelle: AUTOMANAGER</span></p>
<div className="avd-info-grid" style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:18,display:'grid',gridTemplateColumns:'1fr 1fr',gap:'14px 24px',fontSize:13.5}}>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Angebotsnummer</div><b>{vehicle.offerNo||'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Fahrzeugtyp</div><b>{vehicle.condition||'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Vorbesitzer</div><b>{vehicle.prevOwners??'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Anzahl Türen</div><b>{vehicle.doors||'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Anzahl Sitzplätze</div><b>{vehicle.seats}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>HU</div><b>{vehicle.hu||'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Farbe</div><b>{vehicle.color||'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Polster</div><b>{vehicle.upholstery||'—'}</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Hubraum</div><b>{vehicle.displacement||'—'} cm³</b></div>
<div><div style={{color:'var(--fg-muted)',fontSize:11,textTransform:'uppercase',letterSpacing:'.04em',marginBottom:3}}>Standort</div><b>Alleestraße 6, 08525 Plauen</b></div>
</div>
</div>}
{tab==='Ausstattung'&&(vehicle.equipment?<div className="avd-equip-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18}}>
{Object.entries(vehicle.equipment).map(([cat,items])=><div key={cat} style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:16}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'var(--fg-brand)',marginBottom:12,paddingBottom:8,borderBottom:'1px solid var(--border-subtle)'}}>{cat}</div>
<ExpandableList items={items}/>
</div>)}
</div>:<p>Klimaautomatik, Navigationssystem, Einparkhilfe, Sitzheizung, {vehicle.electric?'Schnellladefunktion':'Tempomat'}.</p>)}
{tab==='Sonderausstattung'&&<div style={{display:'flex',flexDirection:'column',gap:20}}>
{vehicle.specialEquipment?<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:18}}><ExpandableList items={vehicle.specialEquipment} initial={8}/></div>:<p style={{color:'var(--fg-muted)',margin:0}}>Keine Sonderausstattung hinterlegt.</p>}
</div>}
{tab==='Weitere Ausstattungsmerkmale'&&<div>
<p style={{margin:'0 0 14px'}}>Sprechen Sie uns auf unsere umfangreichen Serviceleistungen an:</p>
<ul style={{margin:0,paddingLeft:20,display:'flex',flexDirection:'column',gap:8}}>
<li>Individuell auf Ihre Bedürfnisse angepasstes Finanzierungsangebot – ab 2,99% möglich!</li>
<li>Bis zu 5 Jahre Gebrauchtwagen-Garantie</li>
<li>Inzahlungnahme Ihres aktuellen Fahrzeuges</li>
<li>Nachrüstung AHK, Winterräder, Tuningumbauten</li>
<li>Deutschlandweiter Transport möglich</li>
<li>Individuelles Versicherungsangebot</li>
</ul>
</div>}
{tab==='Verbrauchsinformationen'&&(vehicle.energyLabel?<div style={{display:'flex',flexDirection:'column',gap:20}}>
<div className="avd-spec-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16}}>
<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:14,display:'flex',flexDirection:'column',gap:6}}><div style={{fontSize:11,color:'var(--fg-muted)',textTransform:'uppercase',letterSpacing:'.03em'}}>Verbrauch (komb.)</div><div style={{fontSize:15,fontWeight:700}}>{vehicle.energyLabel.consumption} l/100 km</div></div>
<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:14,display:'flex',flexDirection:'column',gap:6}}><div style={{fontSize:11,color:'var(--fg-muted)',textTransform:'uppercase',letterSpacing:'.03em'}}>CO₂-Emissionen (komb.)</div><div style={{fontSize:15,fontWeight:700}}>{vehicle.energyLabel.co2} g/km</div></div>
<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:14,display:'flex',flexDirection:'column',gap:6}}><div style={{fontSize:11,color:'var(--fg-muted)',textTransform:'uppercase',letterSpacing:'.03em'}}>CO₂-Klasse (komb.)</div><div style={{fontSize:15,fontWeight:700}}>{vehicle.energyLabel.co2class}</div></div>
</div>
<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:18}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'var(--fg-brand)',marginBottom:14}}>Energieeffizienzklasse</div>
<div style={{position:'relative',display:'flex',flexDirection:'column',gap:3}}>
{[['A','#2f9e44'],['B','#66a80f'],['C','#a9c839'],['D','#f4d61e'],['E','#f08c1e'],['F','#e8590c'],['G','#c92a2a']].map(([letter,color],i)=><div key={letter} style={{position:'relative',width:60+i*22,height:26,background:color,clipPath:'polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)',display:'flex',alignItems:'center',paddingLeft:8,color:'#fff',fontWeight:800,fontSize:13}}>{letter}</div>)}
<div style={{position:'absolute',left:60+['A','B','C','D','E','F','G'].indexOf(vehicle.energyLabel.co2class)*22+20,top:['A','B','C','D','E','F','G'].indexOf(vehicle.energyLabel.co2class)*29,width:60,height:26,background:'#141414',clipPath:'polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:800,fontSize:15}}>{vehicle.energyLabel.co2class}</div>
</div>
</div>
</div>:<p style={{color:'var(--fg-muted)',margin:0}}>Keine Verbrauchsinformationen hinterlegt.</p>)}
{tab==='Technische Daten'&&<div style={{display:'flex',flexDirection:'column',gap:20}}>
<div className="avd-spec-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16}}>
{[['gauge','Kilometerstand',vehicle.km.toLocaleString('de-DE')+' km'],['zap','Leistung',vehicle.power+' PS'],['fuel','Kraftstoffart',vehicle.fuel],['settings','Getriebe',vehicle.transmission],['cog','Hubraum',(vehicle.displacement||'—')+' cm³'],['users','Sitzplätze',vehicle.seats]].map(([icon,label,value])=>
<div key={label} style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:14,display:'flex',flexDirection:'column',gap:6}}>
<img src={`https://unpkg.com/lucide-static@0.469.0/icons/${icon}.svg`} width={18}/>
<div style={{fontSize:11,color:'var(--fg-muted)',textTransform:'uppercase',letterSpacing:'.03em'}}>{label}</div>
<div style={{fontSize:15,fontWeight:700,color:'var(--fg-primary)'}}>{value}</div>
</div>)}
</div>
<div className="avd-dims-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
{vehicle.dims&&<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:16}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'var(--fg-brand)',marginBottom:10}}>Abmessungen</div>
<div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13.5}}>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Länge</span><b>{vehicle.dims.length} mm</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Breite</span><b>{vehicle.dims.width} mm</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Höhe</span><b>{vehicle.dims.height} mm</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Radstand</span><b>{vehicle.dims.wheelbase} mm</b></div>
</div></div>}
{vehicle.weight&&<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:16}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'var(--fg-brand)',marginBottom:10}}>Gewicht</div>
<div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13.5}}>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Leergewicht</span><b>{vehicle.weight.empty} kg</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Zul. Gesamtgewicht</span><b>{vehicle.weight.gross} kg</b></div>
</div></div>}
{vehicle.trailer&&<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:16}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'var(--fg-brand)',marginBottom:10}}>Zul. Anhängelast</div>
<div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13.5}}>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>ungebremst</span><b>{vehicle.trailer.unbraked} kg</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>gebremst</span><b>{vehicle.trailer.braked} kg</b></div>
</div></div>}
{/* The "Leistung & Fahrleistung" box held only Drehmoment and
    Höchstgeschwindigkeit; with both removed it was an empty heading. */}
</div>
</div>}
</div></div>
</div>
<div style={{display:'flex',flexDirection:'column',gap:16}}>
<div className="avd-sidebar" style={{display:'flex',flexDirection:'column',gap:20,position:'sticky',top:24,alignSelf:'start'}}>
<div>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
<div style={{display:'flex',gap:8}}>{vehicle.offer&&<Badge tone="brand">Sonderangebot</Badge>}{vehicle.count>1&&<Badge tone="neutral">{vehicle.count}× verfügbar</Badge>}</div>
<div style={{display:'flex',alignItems:'center',gap:8}}>
<span style={{fontSize:12,fontWeight:600,color:'var(--fg-muted)',whiteSpace:'nowrap'}}>Fahrzeug {idx+1}/{list.length}</span>
<button onClick={()=>goRelative(-1)} aria-label="Vorheriges Fahrzeug" style={{width:26,height:26,borderRadius:'var(--radius-m)',border:'none',background:'var(--brand-600)',color:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/chevron-left.svg" width={13} style={{filter:'invert(1)'}}/></button>
<button onClick={()=>goRelative(1)} aria-label="Nächstes Fahrzeug" style={{width:26,height:26,borderRadius:'var(--radius-m)',border:'none',background:'var(--brand-600)',color:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/chevron-right.svg" width={13} style={{filter:'invert(1)'}}/></button>
</div>
</div>
<div style={{fontSize:13,color:'var(--fg-muted)',fontWeight:600}}>{vehicle.brand}</div>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:30,lineHeight:1.15,marginBottom:vehicle.energyLabel?4:10}}>{vehicle.model}</div>
{vehicle.energyLabel&&<div style={{fontSize:11.5,color:'var(--fg-muted)',marginBottom:10,lineHeight:1.4}}>Energieverbrauch (kombiniert): {vehicle.energyLabel.consumption} l/100 km; CO2-Emissionen (kombiniert): {vehicle.energyLabel.co2} g/km; CO2-Klasse (kombiniert): {vehicle.energyLabel.co2class}</div>}
<div style={{display:'flex',flexWrap:'wrap',gap:6,alignItems:'center'}}>
{[vehicle.firstReg,vehicle.km.toLocaleString('de-DE')+' km',vehicle.fuel,vehicle.transmission,vehicle.power+' PS'].filter(Boolean).map((c,i)=><span key={i} style={{fontSize:12,fontWeight:600,color:'var(--fg-secondary)',background:'var(--surface-sunken)',borderRadius:999,padding:'5px 11px'}}>{c}</span>)}
{vehicle.color&&<span style={{display:'flex',alignItems:'center',gap:6,fontSize:12,fontWeight:600,color:'var(--fg-secondary)',background:'var(--surface-sunken)',borderRadius:999,padding:'5px 11px 5px 5px'}}><span style={{width:16,height:16,borderRadius:'50%',background:vehicle.colorHex||'#999',border:'1px solid var(--border-subtle)',display:'inline-block'}}/>{vehicle.color}</span>}
</div>
<a href="https://maps.google.com/?q=Autohaus+Voitel+Alleestra%C3%9Fe+6+08525+Plauen" target="_blank" rel="noreferrer" style={{display:'flex',alignItems:'center',gap:7,marginTop:14,paddingTop:14,borderTop:'1px solid var(--border-subtle)',textDecoration:'none',color:'var(--fg-primary)',fontSize:13.5,fontWeight:600}}>
<img src="https://unpkg.com/lucide-static@0.469.0/icons/map-pin.svg" width={16} style={{filter:'invert(0.25) sepia(1) saturate(4) hue-rotate(330deg)'}}/>Alleestraße 6, 08525 Plauen
</a>
</div>
<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:18,display:'flex',flexDirection:'column',gap:14}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:32,color:'var(--fg-brand)'}}>{window.fmtPrice(vehicle.price)}</div>
<Button variant="primary" size="l" onClick={onReserve} style={{width:'100%'}}>Fahrzeug anfragen</Button>
<div className="avd-cta-row" style={{display:'flex',gap:10}}>
<a href={`https://wa.me/491757120472?text=${msg}`} target="_blank" rel="noreferrer" style={{flex:1,textDecoration:'none'}}><Button variant="outline" size="m" style={{width:'100%'}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/message-circle.svg" width={16}/>}>WhatsApp</Button></a>
<a href={`mailto:anfrage@auto-voitel.de?subject=${encodeURIComponent(vehicle.brand+' '+vehicle.model)}&body=${msg}`} style={{flex:1,textDecoration:'none'}}><Button variant="outline" size="m" style={{width:'100%'}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/mail.svg" width={16}/>}>E-Mail</Button></a>
</div>
<div style={{display:'flex',justifyContent:'space-between',gap:16,paddingTop:6,borderTop:'1px solid var(--border-subtle)'}}>
<button style={{border:'none',background:'none',display:'flex',alignItems:'center',gap:6,color:'var(--fg-secondary)',fontSize:12.5,fontWeight:600,cursor:'pointer',padding:0}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/file-down.svg" width={14}/>PDF herunterladen</button>
<a href={`mailto:?subject=${encodeURIComponent('PDF-Exposé: '+vehicle.brand+' '+vehicle.model)}&body=${msg}`} style={{border:'none',background:'none',display:'flex',alignItems:'center',gap:6,color:'var(--fg-secondary)',fontSize:12.5,fontWeight:600,cursor:'pointer',textDecoration:'none'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/send.svg" width={14}/>PDF senden</a>
</div>
</div>
<button onClick={onOpenTradeIn} style={{border:'1px dashed var(--border-default)',background:'none',borderRadius:'var(--radius-m)',padding:14,display:'flex',alignItems:'center',gap:10,cursor:'pointer',textAlign:'left'}}>
<img src="https://unpkg.com/lucide-static@0.469.0/icons/repeat.svg" width={18}/>
<span style={{fontSize:13.5,fontWeight:600,color:'var(--fg-primary)'}}>Mein Fahrzeug in Zahlung geben</span>
</button>
<FinancingCalculator price={vehicle.price}/>
{vehicle.energyLabel&&<div style={{background:'var(--surface-sunken)',borderRadius:'var(--radius-m)',padding:16}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'var(--fg-brand)',marginBottom:10}}>Verbrauchsinformationen</div>
<div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13}}>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Energieverbrauch (komb.)</span><b>{vehicle.energyLabel.consumption} l/100 km</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>CO₂-Emissionen (komb.)</span><b>{vehicle.energyLabel.co2} g/km</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>CO₂-Klasse (komb.)</span><b>{vehicle.energyLabel.co2class}</b></div>
</div>
</div>}
</div>
</div>
</div>
{similar.length>0&&<div style={{marginTop:56}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:22,marginBottom:16}}>Ähnliche Fahrzeuge</div>
<div className="avd-similar-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16}}>
{similar.map(v=><div key={v.id} onClick={()=>onOpenVehicle(v)} style={{cursor:'pointer'}}><window.VehicleCardExport v={v} view="grid" onOpen={()=>{}} compareSelected={false} compareDisabled={true} onToggleCompare={()=>{}}/></div>)}
</div></div>}
<div style={{marginTop:56,paddingTop:40,borderTop:'1px solid var(--border-subtle)'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:22,marginBottom:20}}>Standort &amp; Verkäufer</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:32}}>
<div>
<div style={{fontWeight:800,fontSize:16,marginBottom:12}}>Autohaus Voitel GmbH</div>
<div style={{fontSize:13.5,color:'var(--fg-secondary)',lineHeight:1.6,marginBottom:16}}>Alleestraße 6, 08525 Plauen<br/>Ford &amp; Mitsubishi Vertragshändler seit 1975</div>
<div style={{fontWeight:700,fontSize:13,marginBottom:8}}>Öffnungszeiten Verkauf</div>
<div style={{display:'flex',flexDirection:'column',gap:4,fontSize:13,color:'var(--fg-secondary)',marginBottom:20}}>
<div style={{display:'flex',justifyContent:'space-between'}}><span>Montag – Freitag</span><b>09:00–18:00</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span>Samstag</span><b>09:00–12:00</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span>Sonntag</span><b>Geschlossen</b></div>
</div>
<div style={{display:'flex',gap:10}}>
<a href="tel:+493741557777" style={{flex:1,textDecoration:'none'}}><Button variant="outline" size="m" style={{width:'100%'}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/phone.svg" width={14}/>}>Anrufen</Button></a>
<a href={`mailto:anfrage@auto-voitel.de?subject=${encodeURIComponent(vehicle.brand+' '+vehicle.model)}&body=${msg}`} style={{flex:1,textDecoration:'none'}}><Button variant="outline" size="m" style={{width:'100%'}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/mail.svg" width={14}/>}>E-Mail</Button></a>
</div>
</div>
<div style={{borderRadius:'var(--radius-m)',overflow:'hidden',minHeight:280}}>
<iframe src="https://maps.google.com/maps?q=Alleestra%C3%9Fe+6,+08525+Plauen&output=embed" loading="lazy" style={{width:'100%',height:'100%',border:0,display:'block'}}></iframe>
</div>
</div>
<div style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-l)',marginTop:24,overflow:'hidden'}}>
<div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',background:'var(--surface-sunken)'}}>
{[['mail','E-Mail','mailto:anfrage@auto-voitel.de'],['phone','Telefon','tel:+493741557777'],['navigation','Route','https://maps.google.com/?q=Autohaus+Voitel+Alleestra%C3%9Fe+6+08525+Plauen'],['globe','Website','https://autohaus-voitel.de']].map(([icon,label,href])=>
<a key={label} href={href} data-call-popup={icon==='phone'?'':undefined} target="_blank" rel="noreferrer" style={{textDecoration:'none',color:'var(--fg-secondary)',display:'flex',flexDirection:'column',alignItems:'center',gap:8,padding:'18px 8px',fontSize:12.5,fontWeight:600}}>
<img src={`https://unpkg.com/lucide-static@0.469.0/icons/${icon}.svg`} width={18} style={{opacity:.75}}/>{label}
</a>)}
</div>
<div style={{padding:'18px 22px',borderTop:'1px solid var(--border-subtle)'}}>
<div style={{fontWeight:700,fontSize:13,marginBottom:10}}>Kontaktdaten</div>
<div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13.5}}>
<a href="https://maps.google.com/?q=Autohaus+Voitel+Alleestra%C3%9Fe+6+08525+Plauen" target="_blank" rel="noreferrer" style={{color:'var(--fg-brand)',textDecoration:'none'}}>Alleestraße 6, 08525 Plauen</a>
<a href="mailto:anfrage@auto-voitel.de" style={{color:'var(--fg-brand)',textDecoration:'none'}}>anfrage@auto-voitel.de</a>
<a href="https://autohaus-voitel.de" target="_blank" rel="noreferrer" style={{color:'var(--fg-brand)',textDecoration:'none'}}>autohaus-voitel.de</a>
<a href="tel:+493741557777" style={{color:'var(--fg-brand)',textDecoration:'none'}}>+49 3741 5577-77</a>
</div>
</div>
</div>
</div>
{lightbox&&vehicle.photos&&<div onClick={()=>setLightbox(false)} style={{position:'fixed',inset:0,background:'rgba(10,10,10,.85)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center'}}>
<div onClick={e=>e.stopPropagation()} style={{width:'70vw',height:vvh(70),position:'relative'}}>
<img src={vehicle.photos[activePhoto]} style={{width:'100%',height:'100%',objectFit:'contain'}}/>
<button onClick={()=>setLightbox(false)} aria-label="Schließen" style={{position:'absolute',top:-16,right:-16,width:36,height:36,borderRadius:'50%',border:'none',background:'#fff',cursor:'pointer',fontSize:18}}>×</button>
{vehicle.photos.length>1&&<React.Fragment>
<button onClick={prevPhoto} aria-label="Vorheriges Bild" style={{position:'absolute',left:-16,top:'50%',transform:'translateY(-50%)',width:40,height:40,borderRadius:'50%',border:'none',background:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/chevron-left.svg" width={20}/></button>
<button onClick={nextPhoto} aria-label="Nächstes Bild" style={{position:'absolute',right:-16,top:'50%',transform:'translateY(-50%)',width:40,height:40,borderRadius:'50%',border:'none',background:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/chevron-right.svg" width={20}/></button>
</React.Fragment>}
</div>
</div>}
</div>;
}
window.AutomarketVehicleDetailExport=AutomarketVehicleDetail;