function fmtPrice(p){return p.toLocaleString('de-DE')+' €';}
function VehicleCard({v,view,onOpen,compareSelected,onToggleCompare,compareDisabled,isFavorite,onToggleFavorite}){
const {Badge,IconButton,Button}=window.AutohausVoitelDesignSystem_21e950;const isList=view==='list';
return <div style={{display:'flex',flexDirection:isList?'row':'column',background:'#fff',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-l)',boxShadow:'var(--shadow-card)',overflow:'hidden',cursor:'pointer',height:isList?'auto':'100%'}} onClick={()=>onOpen(v)}>
<div style={{position:'relative',background:v.img.light,width:isList?260:'100%',height:isList?'auto':170,flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--fg-muted)',fontSize:12}}>
Fahrzeugbild
<div style={{position:'absolute',top:8,left:8,display:'flex',flexDirection:'column',alignItems:'flex-start',gap:6,maxWidth:'60%'}}>
{v.offer&&<Badge tone="brand">Angebot</Badge>}
{v.count>1&&<Badge tone="neutral">{v.count}× verfügbar</Badge>}
</div>
<div style={{position:'absolute',top:8,right:8,display:'flex',flexDirection:'column',gap:6,alignItems:'flex-end'}} onClick={e=>e.stopPropagation()}>
<IconButton variant="solid" size="s" aria-label="Merken" onClick={()=>onToggleFavorite(v)} style={isFavorite?{background:'var(--brand-600)'}:{}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/heart.svg" width={14} style={{filter:'invert(1)'}}/>}/>
<label style={{display:'flex',alignItems:'center',justifyContent:'center',width:28,height:28,background:compareSelected?'var(--brand-600)':'rgba(255,255,255,.9)',borderRadius:'50%',cursor:compareDisabled&&!compareSelected?'not-allowed':'pointer'}} title="Vergleichen">
<input type="checkbox" checked={compareSelected} disabled={compareDisabled&&!compareSelected} onChange={()=>onToggleCompare(v)} style={{width:14,height:14}}/>
</label>
</div>
</div>
<div style={{padding:16,display:'flex',flexDirection:'column',gap:4,flex:1}}>
<span style={{fontSize:12,color:'var(--fg-muted)',fontWeight:600}}>{v.brand}</span>
<span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:19,minHeight:'2.6em',display:'flex',alignItems:'flex-start'}}>{v.model}</span>
<span style={{fontSize:13,color:'var(--fg-muted)',minHeight:'2.2em'}}>{v.km.toLocaleString('de-DE')} km · {v.fuel} · {v.transmission} · {v.power} PS</span>
<span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:22,color:'var(--fg-brand)',marginTop:'auto',paddingTop:6}}>{fmtPrice(v.price)}</span>
</div>
</div>;
}
window.VehicleCardExport=VehicleCard;window.fmtPrice=fmtPrice;